BlockStrap Documentation

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
    • 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.