Centric the menu bar on supply theme

Highlighted
New Member
2 0 0

Hello everyone,

i dont know how to middle/central the menu bars text (Home, Katalog etc.) They are all on the left side but i want them in the middle. How can i do this?

0 Likes
Highlighted
Pathfinder
112 1 34

You are going to have to edit your theme. I'll walk you through it. Please make a backup of the files before saving in case anything goes wrong.

Go to your admin panel.

  1. Click on the Online Store link on the left menu under Sales Channels.
  2. Click on the Themes link on the left menu.
  3. Click on the white Actions drop down button on your active theme then select Edit code.
  4. You should now see a list of files and folders.
  5. Click on the Assets folder. There should be a theme.scss.liquid file. Click on that.
  6. Scroll down to around line 3259, you should see code that looks like this:
    .site-nav {
      display: none;
      margin: 0;
      text-align: left;
      margin-left: -$gutter/2;
      font: {
  7. Change the text-align rule to center:
    text-align: center;

     

  8. Click on the white Save button.

The menu nav items should now be centered.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
Highlighted
New Member
2 0 0

It worked thank you very much!

0 Likes
Highlighted
Tourist
7 0 1

amazing, thank you!

0 Likes
Highlighted
New Member
8 0 0

Sorry for reopening the old thread, 

I just wish to know if this would work on all themes. 

I wish to achieve the same result  ( center align the Menu ) on my store theskinmantra.com. 

store name: theskinmantra.com 
theme: showtime 

from what I have been able to figure out: the 2 files that need to change are : 
header-top.liquid
styles.scss.liquid

But Im not sure of the code snippet to be inserted to achieve

Please advise. 

thanks in advance. 

0 Likes