Align items in bootstrap navbar menu

HTML & CSS
1

Hi there,

I have the following menu:

I am trying to align the items on the left of the logo to the right of the logo and the items to the right of the logo to start from the left.

This is what I am trying to achieve:

mwnu
mwnu1493×265 25.9 KB

I’ve tried floating the <ul> to the right, but it doesn’t seem to work.

Can anyone suggest how I can do this?

Thanks!

2

What version of Bootstrap are you using? If you’re using 4+ then you can take advantage of the a full range of flex box utilities. Totally changes everything.

You could make a lot of use of these:

<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
1 Like
3

Why would you assume the OP is using Bootstrap?

4

Because of the post title :rofl:

3 Likes
5

Clearly I need more coffee! :coffee:

3 Likes
6

Just had mine (but I had to go back check…).

3 Likes
7

The html is not aligned properly to do this with flexbox as you would need the brand image as a sibling of the navs which it is not.

A 'big hack would be to do this:

/* Main nav */

@media (min-width: 990px) {
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /**optional offset from top**/
    top: 2%;
  }
 .mynavright{ margin-right:50%!important;
 transform:translateX(calc(100% + 130px))}
 
 .mynavleft{position:relative;left:50%;transform:translateX(calc(-100% - 130px))} 
}

 <nav id="topNav" class="navbar fixed-to navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand mx-auto" href="/">
      <!--Your logo goes here-->
      <img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">   
<span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse">
      <ul class="navbar-nav mynavleft">
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
      </ul>
      <ul class="navbar-nav ml-auto mynavright">
        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
      </ul>
    </div>
  </nav>

The html just had some extra classes added and no re-arrangement of html.

The proper way would be to have the 2 uls and the brand image as siblings and then you can align with flexbox more easily and solidly.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.