0

I'd like 2 rows of Navbar to appear like this

                        CompanyLogo                  link  link  link
-----------------------------------------------------------------------
 link(dropdown)        link       link      link      link      link

company logo (centered), upper 3 links (align right). the upper 3 links should collapse into the logo.

entire 2nd row align center and collapsible. Here is my code:

<html>
<div class="header" style="margin-bottom:0">
           <a class="logo" href="#default">CompanyLogo</a>
           <div class="header-right">
           <a href="#countryicon">country</a>
           <a href="#lang">language</a>
           <a href="#signup">
           <img border="0" alt="signup" src="Sign up icon png.png" width="30" 
            height="30">
           </a>
           <a href="#signin">
           <img border="0" alt="signup" src="Sign in icon png.png" width="30" 
             height="30">
           </a>
           </div>
        </div>

        <nav class="nav navbar">
         <ul class="nav justify-content-center">
           <li class="nav-item">
               <a class="nav-link" href="#">Categories</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Home</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Live Auction</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Make Your Wish</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">How it Works</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Purchase Bid Credits</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Contact us</a>
           </li>
          </ul>
        </nav>
        </html>
LaRiha_
  • 37
  • 1
  • 1
  • 6
  • I think you mean “rows” not “columns”. Your example has two rows, with 4 columns and 6 columns each. – EmmanuelB Oct 26 '18 at 03:37
  • This may also be helpful: https://stackoverflow.com/questions/49780918/how-can-i-have-brand-and-navbar-on-separate-lines – Carol Skelly Oct 26 '18 at 11:11

1 Answers1

1

Note: I don't know what you mean by "the upper 3 links should collapse into the logo" so I just put them along with the other navbar items on small screens.

HTML

The navbar HTML should be straight forward. You can take a look at the Bootstrap documentation.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a href="#" class="navbar-brand">
    CompanyLogo
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav upper-controls">
      <li class="nav-item">
        <a class="nav-link" href="#">Country</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Language</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Categories
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Cat 1</a>
          <a class="dropdown-item">Cat 2</a>
          <a class="dropdown-item">Cat 3</a>
          <a class="dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Live Auction</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Make Your Wish</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">How it works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Purchase Bid Credits</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

On small screens

Again, I don't know what you meant by 3 links collapsing into the logo, so I just put them before the other navbar items.

The tricky part here is to center the logo. To do that, beside setting justify-content: center; on the navbar, I also need to change the button toggler to absolute positioning so that it won't take up any space to prevent the logo from staying in the center.

CSS

/* center the logo */
.navbar {
  justify-content: center;
}

/* in order to center the logo */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

Result

enter image description here

On larger screens (> 992px)

We can change navbar's flex-flow to column so that 2 rows would be displayed. Also we can change the upper 3 links (I assigned a custom css class "upper-controls" to it) to absolute positioning for the same reason we did on the button toggler above.

CSS

/* since it's expanding at lg */
@media(min-width: 992px) {
  /* in order to display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* same logic as the navbar-toggler above */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}

Result

enter image description here

fiddle: https://jsfiddle.net/aq9Laaew/257205/

David Liang
  • 20,385
  • 6
  • 44
  • 70