BS > Navbar
Table of Contents
Block Description #
The BS > Navbar Block is a powerful tool that provides a robust navigation bar for your site. This bar is highly customizable, offering options for color schemes, content containers, and background images, among others. With this block, you can create a responsive and dynamic navigation system that effectively guides your users through your content.
Block Features #
- Selection of background color from the theme color palette or use of featured image from the visited page
- Optional fixed background for stationary navigation
- Three distinct color schemes for aesthetic flexibility
- Content container configuration to fit all layouts (full width or contained)
- Customizable wrapper styles including margins, padding, border color, and shadow
- Advanced customization with additional CSS classes
Block Options #


- Background
- BACKGROUND COLOR (dropdown): Select a color from the theme color palette to use as the navigation bar’s background.
- Fixed background (checkbox): Check this box to make the navigation bar’s background fixed and stationary.
- Use featured image (checkbox): Check this box to use the featured image of the visited page as the navigation bar’s background.
- Upload Image (file upload): If the featured image option is not selected, you can upload a custom image to use as the navigation bar’s background.
- Color scheme
- COLOR SCHEME (dropdown): Select a color scheme for your navigation bar. You can choose between ‘None’, ‘Dark’, and ‘Light’.
- Content Container
- CONTENT CONTAINER (dropdown): Choose how you want your content to be contained within the navigation bar. You can choose between ‘Full Width’ or ‘Contain’.
- Wrapper Styles
- Margins (text input): Adjust the margins of the navigation bar to fit your layout.
- Padding (text input): Adjust the padding within the navigation bar for comfort and readability.
- BORDER COLOR (dropdown): Select a border color for your navigation bar from the theme color palette.
- SHADOW (dropdown): Choose to include a shadow effect on your navigation bar and select its style.
- POSITION (dropdown): Select the positioning of the navigation bar in your layout.
- Advanced
- ADDITIONAL CSS CLASS(ES) (text input): Input any additional CSS classes you’d like to add to the navigation bar for further customization.
Still stuck? How can we help?
How can we help?
Updated on June 29, 2023