BS > Navbar
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 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.
- ADDITIONAL CSS CLASS(ES) (text input): Input any additional CSS classes you’d like to add to the navigation bar for further customization.