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.