HTML bootstrap nav bar with brand logo

Question

I have a navbar with a menu button on the left. This menu button works when the below tags removed:

<div class="navbar-center navbar-brand" href="#">
  <a class="navbar-brand">Brand</a>
</div>`

I need this BRAND title to stay but it keep messing up the functionality of the menu button

 .navbar-brand { float: none; } .navbar-center { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; height: 100%; } 

 <!-- HTML --> <div id="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-default"> <i class="fa fa-bars fa-lg" aria-hidden="true"></i> <span>Menu</span> </button> </div> <div class="navbar-center navbar-brand" href="#"><a class="navbar-brand">Brand</a></div> </nav> 

Answer 1

The button is not disabled, you position it absolute and give it a 100% width and height. Your navbar center is taking up all the space.

I would reconsider rewriting your logic and avoid working with absolute position if you don't know exact what you're doing.

Anyhow, a quick (ugly) fix is to put the z-index negative. This way it's still takes up the whole screen, but behind everything.

 .navbar-brand { float: none; } .navbar-center { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; height: 100%; z-index:-99999 } 

 <!-- HTML --> <div id="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-default"> <i class="fa fa-bars fa-lg" aria-hidden="true"></i> <span>Menu</span> </button> </div> <div class="navbar-center navbar-brand" href="#"><a class="navbar-brand">Brand</a></div> </nav> 

Answer 2

This fix your code, you only need the "< a >" line with the class " navbar-brand ".
To center the brand without breaking the menu, you can use the BS class " mx-auto ", it's not necessary additional CSS.

Bootstrap is a little sensitive with "defined structures" like nav or menu, you have to use the documentation in the own bootstrap page ( https://getbootstrap.com/docs/4.1/getting-started/introduction/ ) for don't go crazy ;)

PD: When you use the Snippet you can use the "add additional scripts" button in the left panel, for add more frameworks like in this case "bootstrap" and "fontAwesome" ;)

 .navbar-brand { float: none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <div id="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button id="sidebarCollapse" class="btn btn-default"> <i class="fa fa-bars fa-lg" aria-hidden="true"></i> <span>Menu</span> </button> <a class="navbar-brand mx-auto" href="#">Brand</a> </div> </nav>