Bootstrap - Navbar

About

UI - Navbar (Horizontal Menu|Navigation Header) in Bootstrap

In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the container-fluid is no longer required for a full width Navbar.

Property

Overflow

• Overflowing content

Bootstrap doesn't know how much space the content in your navbar needs, therefore you might run into issues with content wrapping into a second row. To resolve this, you can:

• Reduce the amount or width of navbar items.
• Hide certain navbar items at certain screen sizes using responsive utility classes.
• Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Toogleable, Collapse, Breakpoints

They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

The @grid-float-breakpoint variable of the Less source control when the navbar collapses/expands. The default value is 768px (the smallest “small” or “tablet” screen).

Semantic

Be sure to use a

]] element or, if using a more generic element such as a <div>, add a role=“navigation” to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

• navbar-inverse for darker text color (black).
• navbar-light for lighter text color (white),

The fixed navbar will overlay your other content, unless you add padding to the top or bottom of the

.

See Web - How to style a page to allow a fixed top header (Navbar / Menu) ?

v3. Both classes will add a CSS float.

• navbar-right
• navbar-left

Same as pull-left and pull-right but scoped to media queries for handling of navbar components across device sizes.

Example:

@media (min-width: 768px) {
    .navbar-left {
        float: left !important;
    }

    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }

    .navbar-right ~ .navbar-right {
        margin-right: 0;
    }
}

Nav is the combination of a nav element and a child container element to center and pad th content

Nav ClassName:

• navbar: Provide a static navbar
• navbar-default
• navbar-fixed-top
• navbar-fixed-bottom
• navbar-static-top: scrolls away with the page
• navbar-inverse: inverse color (black)

Child Container className (to center and pad navbar content):

• container
• container-fluid

• navbar-header: is 'Sticky' (non-collapsing) container

Custom styles for responsive collapsing and toggling of navbar contents powered by the collapse Bootstrap JavaScript plugin.

• navbar-collapse: will collapse.
• navbar-toggler: design the button for toggling the navbar when in its collapsed state
• navbar-toggler-icon: Keep as a separate element so folks can easily override it with another icon or image file as needed.
• navbar-expand-md, navbar-expand-sd, …: for configuring where the navbar collapses.

• navbar-brand: Used for brand, project, or site names. Generally a child of navbar-header

<a class="navbar-brand" href="#">
       <img alt="Brand" src="...">
</a>

See UI - DropDown

Example:

<!-- Add any additional bootstrap header items.  This is a drop-down from an icon -->
<li class="dropdown navbar-right">
  <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle">
  <span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
  <ul class="dropdown-menu">
	<li>
	  <a href="/users/id" title="Profile">Profile</a>
	</li>
	<li>
	  <a href="/logout" title="Logout">Logout </a>
	</li>
  </ul>
</li>

Custom navbar navigation (doesn't require nav, but does make use of nav-link.

• navbar-text (Like Login Name)

See: https://www.codeply.com/go/cxXqBnGrPx

Navbars require:

• a wrapping nav element with a .navbar class
• two color scheme classes:
  • navbar-inverse or navbar-light
  • and a bg-* or own style style=“background-color: #e3f2fd;”
• an optional .navbar-toggleable-* for responsive collapsing

<!-- Navbars require a wrapping .navbar with .navbar-toggleable-* for responsive collapsing and color scheme classes.-->
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Will not collapse and stay inline -->
  <div class="navbar-nav flex-row">
       <a class="navbar-brand" href="#">Navbar</a>
       <a class="nav-link d-inline-flex p-2" href="#">Link</a>
        <a class="nav-link d-inline-flex p-2 disabled" href="#">Disabled</a>    
  </div>
  <!-- Will collapse -->
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

• http://getbootstrap.com/components/#navbar
• https://github.com/twbs/bootstrap/blob/v4-dev/scss/_navbar.scss
• https://v4-alpha.getbootstrap.com/components/navbar/