Navbar

The axentix navbar allows you to easily create a navigation menu at the top of your page.

</> Show code

Simple navbar

To use a simple navbar, add the .navbar class to your nav tag.
You can create groups of links by wrapping your links inside a .navbar-menu element.
The .navbar-brand class is useful to show your company/website name.
Use the .ml-auto class to put your menu on the right side of the navbar.
Use different margins classes to place your navbar content.

Use the hover utility classes on your navbar to get a hover style variant.

Logo navbar

To use a logo navbar, add the .navbar-logo to the <a> who contain your img. Note that the .navbar-centered class can center any element inside of your navbar.

To get a fixed navbar, simply wrap your navbar inside a .navbar-fixed container.

Customizable navbar

Axentix navbar is personnalisable. Use different classes to change the content adjustment and style.

Styling

CSS Variable Default value Description
--ax-navbar-height 3.5rem Custom the navbar height.
The layout will adapt by itself.
--ax-navbar-z-index 100 Navbar z-index.