How to Customize the Navigation Bar

On This Page

TABLE OF CONTENTS

 

Getting Started

 

One incredibly useful and vital tool for any webpage is the Navigation Bar. This bar is generally found at the top of your store's webpage and allows for your customers to easily navigate and sift through the most important and highlighted pages of your website. This article will briefly detail how to best utilize and customize this handy feature.

 

When customizing your Navigation Bar, you have two options: Navigation and Mega Menus. This article will focus on Navigation; click here for Mega Menus.

 

In order to begin customizing your Navigation, follow these steps:

  1. From your myShopify page, select Online Store > Theme
  2. From Theme, select Customize 
  3. From the customization menu, you'll see a customization side bar on the left side. From here select Navigation. 


From here, you'll see several categories for customization:

  • Menu Selector
  • Section Colors
  • Menu Colors

 

This section of the Menu Selector, Navigation Menu, is where you can link previously created menus. In order to do this, select Select Menu and add the menu you would like to link to your Navigation Menu. 

 

It is important to note that this Navigation Menu feature is distinct from the following Mobile Menu section. Navigation Menu deals exclusively with the height as it appears on non-mobile devices.

 

Mobile Menu

This section of the Menu Selector, Mobile Menu, is where you can link previously created menus. In order to do this, select Select Menu and add the menu you would like to link to your Mobile Menu. Please note that this menu is what appears on the mobile webpage, but that navigation menus can appear differently on non-mobile devices, as seen above. 

 

Section Colors

This section allows for the customization of the color of the background of the navigation menu.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

This section allows for the customization of the color of the text for each of the links across the navigation menu.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

This section allows for the customization of the color of the accents of the navigation bar. This can include drop down arrows and other accents.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Border Transparency

This section allows for the ability to adjust the transparency of the border outline through the using of a scrolling cline. You can adjust the percentage of transparency the the borders in 10% increments. We recommend playing around with this until you find what works best for your store's webpage.

 

Background Color

This section allows for the customization of the color of the background of the drop down menus. You can see the adjustments and changes by changing colors and hovering your cursor over the drop down menu.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Text Color

This section allows for the customization of the color of the text of the drop down menus.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Arrow Color (Hover)

This section allows for the customization of the color of the arrows in your navigation bar's drop down menu. You can see these color changes when hovering your cursor over the drop down menus.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Theme Settings

At the bottom of your customization sidebar, you will find a bonus dropdown menu under the title Theme Settings. This dropdown holds an extra setting: iWish.

 

iWish

Here you will see a tick box to select or deselect depending on whether your store has the iWish app installed.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request