Navigation Bar

Shopify Partner
2 0 0

How do I center the navigation bar? How do I move the search bar under the center navigation on the supply theme? Thank you for all your help.

0 Likes
Shopify Staff
Shopify Staff
283 0 45

Hi John!

We will need to adjust the code for the theme to do this, I would suggest the first step would be to duplicate your theme. This will allow us to have a backup.

  • Visit your theme file by going to Online Store > Themes
  • On your active theme, click the [...] button, and select Edit HTML / CSS
  • We will edit the timber.scss.liquid, under Assets
  • Let's start with the centering of the menu. Visit Line 2368 to find the alignment variable for the navigation. Change left to centerand Save!
  • To put the seach bar below the navigation, we should start by removing the search bar at the very top by deleting Line 113 in theme.liquid. If you want to keep it at the very top and have it beow the menu skip this step.
  • On theme.liquid, put this code into Line 145:
    {% include 'search-bar' %}
  • The default border on this is white, so it makes it a bit hard to see. Let's make the border orange by adding some CSS.

  • Go to Line 2189 in timber.scss.liquid, and add an empty line. On the new empty Line 2190, add this:

    border-color: orange;

     

That should cover everything you asked for! I hope that helps, please let me know if you have any other questions about this :)

Hugh

Happy selling! :)
0 Likes
Excursionist
19 0 6

Hey Hugh,

Is it possible to add the search bar below the Navigation (effectively on a new line) in the Supply Theme?

Ideally, we need the search bar to be visible underneath the nav bar on mobile.

I'd truly appreciate your help if it's possible!

Tom

0 Likes
New Member
2 0 0

Hi, I want my navigation and header to look like this site (https://commonpanda.com/). Currently my site looks like this (https://ellounicorn.com/) Able to assist please. Thank you. 

0 Likes
Tourist
4 0 0

hey, its depend upon which theme you are using some of theme have multiple option to customize navigation menu, so first of all you need to click on customize homepage then go to header there is multiple option to customize where you can customize your menu as you want like https://needfest.com this store has center navigation bar with search bar.

0 Likes