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>

Why you have duplicated the `.navbar-brand` inside two different `nav` elements? You can use `Brand` directly instead of using a div to wrap it. — , Oct 16 '18 at 11:50
Yeah my fault, apologies. Even with your above correction the menu button is still disabled — bano590, Oct 16 '18 at 13:11
You should follow the [Navbar structure explained in the docs](http://getbootstrap.com/docs/4.1/components/navbar/#supported-content), and read the other questions about [Navbar alignment](https://stackoverflow.com/questions/19733447/). — Carol Skelly, Oct 16 '18 at 13:26

score 0 · Answer 1 · answered Oct 16 '18 at 13:46

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>

Thanks for the help much appreciated. Hadn't properly looked at the docs for navbar structure — bano590, Oct 16 '18 at 13:48

Alvargon · Answer 2 · 2018-10-16T14:32:02.130

0

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>

edited Oct 16 '18 at 14:32

answered Oct 16 '18 at 14:14

Alvargon

324
3
10

1

That w3schools link is about Bootstrap 3. For clarity, I'd remove the link altogether since w3schools isn't exactly the best source for coding questions/answers... – McVenco Oct 16 '18 at 14:24
It's still better than putting classes without knowing what are you doing, but I understand what do you mean about the actual W3C documentation. – Alvargon Oct 16 '18 at 14:31
1

Please don't confuse W3C with W3Schools, they have nothing to do with each other :-) – McVenco Oct 16 '18 at 14:43
Thanks for the help. Just to clarify, will the Brand be always slightly off to the right because of the menu button? – bano590 Oct 16 '18 at 15:10
1

In this case yes. The clas _mx-auto_ is like the _margin: 0 auto_, the center of the brand element is between the button and the end of the nav on the right. For fix that you can use the **Grid System** (https://getbootstrap.com/docs/4.0/layout/grid/) for example, if you add the class _col-md-1_ to the "a" brand you could have a better distribution, but it depends of what do you want, this is not a "fiable science" maybe my perception of center is not what you like. But with that (the grid classes) you can do what you need. – Alvargon Oct 17 '18 at 10:32

HTML bootstrap nav bar with brand logo

2 Answers2