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.

Color

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

Fix

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) ?

Alignement

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; } }

Component Tree

Container

Parent (Nav)

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

Child

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

Responsive navbar

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.

Element

Brand (ie Site Name)

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>

DropDown (like Login)

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>

navbar-nav

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

Text

navbar-text (Like Login Name)

Example

Version4

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>

Rendered by WebCode

Documentation / Reference