Venue - Header - Change the alignment of the navigation & logo

This article will bring you through the options available for the layout of your navigation and logo, including style and visibility and the steps involved in setting it up.

Navigation styles :

There are three different navigation styles available, here is an overview of each :

1. Inline - The navigation aligned to the left with the logo centered on the same line.

2. Center -  Both the navigation and logo are placed in the center of the header, with the logo on top.

3. Icons - The logo remains exposed in the center with the navigation hidden behind a hamburger/mobile style icon.

Here's an example of how the sidebar navigation looks once the hamburger icon has been clicked : 

Navigation visibility:

These settings will determine when the navigation will be visible on the page in relation to the actions carried out by your customers. Giving you control over where your customer's attention is directed.

  • Default - The navigation will only be visible at the top of the page, as the customer scrolls down the navigation will leave the page and only be visible again upon scrolling back up. 
  • Scroll up - Similar to default, the navigation will no longer be visible once the customer scrolls down, however, it will instantly be visible again once the customer starts to scroll back up the page.
  • Sticky - The navigation remains on screen at all times, remaining visible as the user scrolls down.

Choosing your navigation & logo alignment 

1
Log into your Shopify store admin.
2
Click on  Online Store then  Themes in the side menu to get to the themes area of your admin.
3
Click the  Customize button next to your active theme.
4
From here, click on the Header section in the top left corner.
5
Within the Header section, you will find options for Navigation style and Navigation visibility, where you can choose the above-mentioned options :

6
Lastly, save any changes you make by clicking the Save button on the top right-hand side of the theme editor.

Insight

Our Header and Navigation settings allow you to have more control over where your customer's attention is directed to when they visit your site,  here is some extra insight into each setting to help you use these settings to your advantage : 

  • Inline - Keeping your navigation and logo on the same line, this option uses the least amount of space making for a sleek, efficient introduction to your website. 
  • Center - Have a logo to show off? This option allows you to lead with your logo design followed by navigation, a great way to introduce your customers to your company brand from the get-go. 
  • Icons - An excellent option for a large (or growing) navigation, this setting will store the navigation behind a hamburger icon that opens into a sidebar drawer while keeping your logo exposed. This also keeps your navigation style consistent across desktop and mobile.
  •  Default - This is useful if you have content lower down on the page that you would prefer your customers to interact with, such as a featured product or collection.
  • Scroll up - however, the big difference here is that it will instantly be visible again once the customer starts to scroll back up the page. This option works really well to create more space for content while keeping the navigation easily accessible, especially useful on mobile.
  • Sticky - Want your customers to interact with the navigation as soon as possible? The Sticky setting keeps the navigation visible at all times.

Still need help? Contact Us Contact Us