Customizable CSS
search

Navbar

Responsive Navbar

You can create responsive navbar by adding a .navbar-collapse-{breakpoint}, encapsulating the .nav element with a .nav-menu element, and a adding a .nav-toggler button with a data-target perperty set to and id use by the .nav-menu, .nav will be hidden until the collapse breakpoint is reach, your final sctructure should look like this:

  • .navbar element with a .navbar-collpse-{breakpoint} class, this should contain the following elements:
    • .brand your brand or any element
    • .nav-toggler button with a data-target property set to the id of a .nav-menu element class
    • .nav-menu element with an id set to the .nav-toggler data-target value. this element yould contains
      • .nav element with your links or any other kind of element
<nav class="navbar b navbar-white navbar-collapse-md">
    <a class="brand">
        Brand
    </a>
    <button class="btn nav-toggler">
        <i class="material-icons" data-target="nav_menu">
            menu
        </i>
    </button>
    <div class="nav-menu" id="nav_menu" >
        <ul class="nav">
            <li class="nav-link">
                <a class="nav-item">
                    ...
                </a>
            </li>
            <li class="nav-link">
                <a class="nav-item">
                    ...
                </a>
            </li>
            <li class="nav-link">
                <a class="nav-item">
                    ...
                </a>
            </li>
        </ul>
    </div>
</nav>

this navbar will collpase on a screen bellow the md breakpoint

you can change the position of the navigation by using some of the flexbox utilities

<nav class="navbar b navbar-white navbar-collapse-md">
    <a class="brand">
        Brand
    </a>
    <button class="btn nav-toggler">
        <i class="material-icons" data-target="nav_menu">
            menu
        </i>
    </button>
    <div class="nav-menu justify-end" id="nav_menu" >
        <ul class="nav ">
            ...
        </ul>
    </div>
</nav>

You can also change the color of a sidebar by using the class .navbar-{ theme/color }

<nav class="navbar navbar-primary"> 
  ...
</nav>
<nav class="navbar navbar-dark"> 
  ...
</nav>
<nav class="navbar navbar-red-600"> 
  ...
</nav>
Brand
Brand
Brand

Lastly you can set the position of a navbar to the top always by adding the class .fixed or .sticky, remember to add padding to the elements bellow otherwise the navbar elements will overlap

On this page

Site

Support

Customizable CSS By Haniel Hernández. 2021