Articles on: Design

Customize your Navbar Layout

Customize your Navbar Layout


Your navigation bar plays a big role in how viewers interact with your Simplebooklet. Whether you're going for a clean and minimal design or a fully-featured, branded experience, the Nav Layout tool gives you full control over the style and functionality of your navbar on both desktop, mobile, and embed views. Here’s how to customize your navbar layout across all devices.


Available on all plans.


How to Customize Your Navbar Layout


  1. Open your Dashboard and select the Simplebooklet you want to update.


  1. Click the Design tab for that booklet.



  1. In the left-hand toolbar, click the Nav Layout button.



  1. This will open the Navbar Layout tool, where you can configure your settings for desktop, mobile, and embed views.



Desktop Layout


  1. By default, you'll be working with the Desktop Transitions. You’ll see 8 different layouts to choose from.



  1. Select your preferred layout for the desktop view. The options include:



  • Candy Bar: Full-featured bar with logo, controls, and links. (default)


  • Essential: A compact layout with basic elements.


  • Reveal: A sleek bar that appears on interaction.


  • Website: A top-positioned navigation bar commonly used on websites.


  • Modern, Minimalist, Footer Only, Blank: Each with different balances of branding and navigation.


You’ll see a live preview of your booklet while customizing, so you can instantly see how your navbar looks.


Try different layouts to find the one that best suits your content and audience.



Mobile Layout


  1. To switch to mobile, click the Mobile tab at the top.



  1. You'll have 5 mobile-friendly navbar layouts to choose from:



  • Candy Bar (default)


  • Website: One-button menu in the top-right corner.


  • Minimalist: Action and page-turn buttons, app-style.


  • Controls: Front-and-center navigation tools.


  • Blank: No navigation, just content.


  1. Click the Mobile Preview button above the navbar options to see how your layout looks on mobile.




Embed Layout


  1. To switch to embed, click the Embed tab at the top.



  1. We’ve added 3 new navbar layouts for embedded Simplebooklets to ensure it looks great on any website. The embed layout options are:



  • Candy Bar (default)


  • Minimalist: Compact, clean design.


  • Blank: No navbar, just content.


  1. Click the Embed Preview button to see how your layout looks when embedded.






  1. You can adjust the text color and background color of both the header and footer.


  1. Modify the opacity levels to create a subtle or bold effect.


Use low opacity for a floating look or high contrast for stronger branding.


  1. Once you're satisfied with your changes, click Done in the top-right corner to save your settings



  1. Your navbar layout is now updated and ready to be viewed by your audience. The changes you made will be reflected in both the desktop, mobile and embed views of your Simplebooklet!


Updated on: 02/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!