@H5magNavigation bar customization
The navigation bar appears on the bottom or top of your magazine, and allows your readers to quickly browse through it. By default it contains, a home, index, previous and next button and H5mag logo.
Enterprise users can have their navigation bar customized include other items and styling. When using e-commerce integration the shopping cart also appears in the navigation bar.
Customization
H5mag offers various options for personalizing the navigation bar. By default, each edition uses the standard navigation bar, which you can modify by navigating to the Theme > Viewer page.
Right out of the box, you can also choose between existing themes:
- Obsidian Black (Default)
- Silver
- Snow White
These pre-built themes offer a quick and easy way to change the overall appearance of your navigation bar. In addition to these themes, H5mag provides several customization options for the navigation bar, including:
- Background-color: Modify the background color of the navigation bar to match your brand or design aesthetic.
- Normal-color state of the button: Change the default color of the buttons .
- Active color state of the buttons: Customize the color of the buttons when they are actively clicked or selected.
- Disabled color state of the buttons: Adjust the color of the buttons when they are disabled or unavailable.
Edition Customization
You may want to customize the navigation bar for a specific edition to create a distinct appearance, match a particular theme, or cater to the unique content and target audience of that edition.
Setting up a Custom Navigation Bar for Each Edition:
- Click on the Edition Settings icon located in the top-right corner.
- Click on "Theme."
- Select "Custom" as the "Navigation Bar" value.
- Change the color values
By following these steps, you can easily set up a custom navigation bar for individual editions, providing a unique look and feel for each one while addressing the specific needs of your content and audience.
Custom logo
Contact us to replace the H5mag logo with your own. We'll enable the feature for you. You can then simply upload your own logo, but we do ask you to place a reference to H5mag in your credits page.
Icons
If your plan allows it, the navigation bar can be customized on request. You should submit a design for a customized navigation bar to your contact person at H5mag to check if it is feasible, and to get an estimate of how much time it wil take to implement.
The buttons can have an disabled, normal and active state. You can download a template file that contains all states for all the buttons. For the best file size and display quality on all devices this should be a vector based SVG image.
All the buttons are grouped together in a so called "sprite" which allows them to load much faster than individual images. You can use an existing sprite as a template.
The sprite should be 450 by 135 pixels in size, with 3 rows of 45 pixels each. Each row is used for a different state of the button:
- Top row: default state
- Second row: active/hover state
- Third row: disabled state
Each button is 45 by 45 pixels in size, with the exception of the logo, which can be wider (up to 135 pixels).
Previous/next buttons in the middle
The previous/next buttons are intentionally placed on the right side. This allows readers to navigate with their thumbs when holding a tablet.
Adding a custom element to the navigation bar
Using an edition script, you can add a custom element to the navigation bar:
UI.instances.navArticles.addCustomElement('left', 'append', $('<li class="my-example-icon"><a href="https://www.example.com/" target="_blank"></a></li>'))