Navbars are flexbox based navigation headers which can be used to display branding, navigation links, buttons, forms, and also regular text.
Before we begin
Here's a list of things to understand about navbars in Halfmoon.
- Navbars are fixed to the top by default. The content wrapper (.content-wrapper) starts right below it.
- Navbars must be the immediate children of the page wrapper (.page-wrapper). You can learn more about this in the page building section (opens in new tab) of the docs.
- When the default navbar is used, the page wrapper (.page-wrapper) must be given the .with-navbar class. This automatically adjusts all the other content in the page to accomodate the navbar. Moreover, without this class, the navbar will not be displayed.
With all that said, given below is an example of a navbar. You should try resizing your browser window (if you can) to see how the navbar works differently on different screen sizes.