Move account and search icons to your navigation

Move your account and/or search icons into the main navigation with this customization. 

Result:

How to:

1

Make a duplicate of your theme

Do not skip this step, it's required.

2

Create navigation menu items

Open your Navigation editor for your store:

Create top-level menu items for Account and Search:

Create in your Main Menu two menu items:

Sign-In (Account):

1. Make sure the Name is exactly (case sensitive) :

Sign-In

Search:

If you have the old menu system, map the link for search to "/search" without quotes. The new menu system has an option for Search.

2. Make sure the Name is exactly (case sensitive) :

Search

At this point your new navigation menu items should be showing:

3

Add Javascript to replace the text in the menu with icons

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Code to add:

Click to view code

Use this link to learn where exactly to add this code snippet:

Where to add your Javascript code

You can use your own .SVG files (from your shop). These .SVG files have been uploaded to our sample shop. 

4

Turn off icons in the header

You can turn off the duplicate icons in the top announcement bar from the Theme Editor's Header settings:

Use the Custom Theme option in the top right corner of the Code Editor:

At the bottom of the Header settings you'll find the TOP BAR section:

Uncheck both these settings:

Save your changes. 


CSS code to invert icon colors

If you're using a transparent header with a dark background, the icons may appear too dark:

You can use this CSS snippet can help with both modes, transparent and white background when scrolling:

/* -- Start Pipeline override code -- */
.nav-link img { filter:invert(1); }
/* - end - */

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us