0

Now I know that similar questions have been dealt with here, but none of those solves my problem. So please understand. I've tried ml-auto next to navbar-nav class, but somehow the items are align to the left. Please see my code below:

    <nav class="navbar navbar-default navbar-expand nav-bar fixed-top">
        <div class='navbar-brand nav-link' onclick="location.href='/'">
            <img class="ci" src="{% static 'museum/images/ci.png' %}" alt='ci'>
        </div>
        <div class="navbar-text">
            <ul class="navbar-nav ml-auto">
                <li class='navbar-item'>Home</li>
                <li class='navbar-item my-auto'>Menu</li>
            </ul>
        </div>
    </nav>

I haven't touched anything in the CSS, but the items are aligned to the left. What is the problem? Thanks.

Ryan
  • 199
  • 1
  • 9
  • Do you try with `ms-auto` and `me-auto` – Asela Priyadarshana Sep 09 '21 at 12:44
  • I'm using bootstrap4. So far as I know, `ms-auto` works on Bootstrap5, am I right? – Ryan Sep 09 '21 at 12:46
  • yes. It's with boostrap 5 – Asela Priyadarshana Sep 09 '21 at 12:48
  • Thanks, but I'm using Bootstrap 4 :( – Ryan Sep 09 '21 at 12:50
  • It's not working because you're not using the [correct Navbar structure](https://getbootstrap.com/docs/4.6/components/navbar/#supported-content). `navbar-text` div does nothing. – Carol Skelly Sep 09 '21 at 13:03
  • **CSS:** .navbar-item { margin-left: auto;} This will align each page-link on the navbar to the right. If you have some social media links that you want on the navbar **but aligned to the left side** just make each a .smedia-item class and add {.smedia-item: margin-right: auto; } For an elaboration on all this look at Kevin Powell's video https://www.youtube.com/watch?v=Azfj1efPAH0 – Trunk Sep 09 '21 at 13:03

1 Answers1

-1

you need to "collapse" div and add collapse div justify-content:flex-end;

https://getbootstrap.com/docs/4.6/components/navbar/

   <nav class="navbar navbar-default navbar-expand nav-bar fixed-top">
    <div class='navbar-brand nav-link' onclick="location.href='/'">
        <img class="ci" src="{% static 'museum/images/ci.png' %}" alt='ci'>
    </div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
    <div class="collapse navbar-collapse" style="justify-content:flex-end;" id="navbarNav">
        <ul class="navbar-nav">
            <li class='navbar-item'>Home</li>
            <li class='navbar-item my-auto'>Menu</li>
        </ul>
    </div>
</nav>
Furkan Köseoğlu
  • 16
  • 4