Replacing the default header of a website completely presents several major challenges, which Navi+ has now been able to address:
- The header appears at the top of the page, so it needs to have the highest loading speed. This significantly impacts the website’s LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and other performance metrics, affecting the user experience.
- The header must display the logo, main menu, and primary navigation elements, so Navi+ must excel in presenting these features.
- The default header of the website must be hidden to be completely replaced by the Navi+ menu.
Step 1: Add a Section > Mobile header menu
We have several ready-made templates to give you ideas for designing your website header. These templates help you understand what Navi+ can do for you with its tools. You can fully (and often should spend most of your time) customize the menu according to your usage needs using Navi+’s tools. Adding and removing elements is very convenient and quick, allowing you to meet your business needs at any time. You can upload logos, add menu items, modify them as needed, and make changes to the UI, such as colors, fonts, icons, and images.
Step 2: Include the menu in the Shopify theme.
Choose Online stores/Themes > Current theme [Customize]. Add a Navi+ section on the header position.
Enter the Embed ID of the menu (SF-123456789) into the configuration section, select “It is not sticky menu” by default to prevent the menu from being sticky at the top of the device, do not use a title, and set it to “Full width.”
Step 3: Hide default header of website.
Hiding the default header of a website is always the most challenging step, as it varies across different themes. Here is an example with the Dawn theme (default and free on Shopify). You need to select the header section and then add the following code (This code can run only on mobile device):
@media only screen and (max-width: 768px) {
sticky-header {
display: none !important;
}
}
This is important because it prevents the header from causing stuttering when hidden.
For another theme, you may need to find a different solution; sometimes, it’s as simple as clicking the eye icon in the Header section, while other times, you may need to use a CSS snippet. If you can’t find the best solution for your case, don’t hesitate to send a support request to Navi+; we are ready to assist you.
Step 4: Enjoy
Document the changes you make to your theme, and you will find everything ready to function very simply. To test on a real device, visit the following address on your mobile (or scan QR): https://blablo2023.myshopify.com with the password: 12345 to experience it firsthand.
