The Header, Footer, and Top bar are elements of your Booqable website that are visible on all of your pages.
To customize these sections on your website, navigate to the theme editor and select the section you wish to edit.
Follow the guide below to learn more about editing the Header, Footer, and Top bar on your Booqable website.
💡Note: The Header, Footer, and Top bar include settings for color palette selection and padding for desktop and mobile devices. This allows you to customize the color of a section and padding for each device type.
Header
The Header includes your logo and navigation menu, making it essential for branding and easy site navigation.
Header settings:
Enable Sticky Header: Keep the header visible as users scroll.
Transparent Background: Used to create a see-through header.
Logo: Upload your company logo.
Site Title: Enter your site title, which is displayed when no logo is added. This setting does not affect your page meta titles. (link to SEO)
Show Period Picker and Search: Enable these options if you want to provide date selection and search functionality directly from the header.
Search Placeholder: Customize the placeholder text for the search bar.
Menu: Select a navigation menu to be displayed in the header.
Socials label: Add a label for social media links, such as "Follow us on."
Footer
The Footer is typically used for additional links, contact information, and legal notices.
Logo: Upload a logo for the footer section.
Site Title: Enter your site title to be displayed when no logo is added.
Bottom Message: Add a custom message, such as a copyright notice or additional company information.
Privacy Policy Link Text: Customize the text for the privacy policy link.
Bottom Menu: Select a menu to be included at the bottom of the footer.
Rounded Corners and Full-width Background: Adjust the design elements by selecting rounded corners and enabling a full-width background.
Top bar
The Top bar is displayed at the very top of your website, above the header. It’s a great place for promotional messages, contact information, and unique selling points.
Top bar settings:
Show Top bar: Choose whether to display the Top bar on your website.
Main message: Add your main promotional message. In the example above, it shows a coupon code.
Icon: Choose an icon that complements your message.
Icon style: Select either Filled or Outlined style.
Secondary message: Add a secondary message, such as contact information. It will be shown next to the icon.
Menu: Add a menu to the right side of the Top bar.
💡Note: The Icon, Icon style, Secondary message, and Menu will only be visible on desktop devices.