Minimal Theme - Fixed Main Menu - HELP!

New Member
2 0 0

 

Hello,

I have come across this topic on past posts but I'm ideally after someone to talk me through this in baby steps as my attempts so far haven't worked.

 

I am using the basic shopify theme Minimal. I'm looking to fix the top menu navigation so that wherever you visit on my website (any page, not just the homepage) the main menu stays at the top of the page.

 

I am familiar with very basic html coding.

 

All help greatly appreciated!

0 Likes
Shopify Partner
1838 173 601

Hello,

 

While I will provide you with a step-by-step guide how to achieve the basics of a sticky menu / header for Minimal theme, I must mention that in my opinion, Minimal theme doesn't lend itself well to this modification as I will provide. For a sticky header to work properly, be user friendly such as not to taker up too much vertical space, be responsive and possibly even add some compelling transition effect between 2 sizes, would require more customisation than is feasible to writeup here and sadly but realistically best left for later when you feel more comfortable and confident with HTML, CSS and even some JavaScript. That's just my feeling regarding sticky menu and Minimal theme - I think it may be a happier solution to simply choose a theme that already has this type of menu / header built-in.

 

That said, here's the guide. Caveat emptor margins will be off across devices, header will be too high and take up too much vertical space.

 

Step 1

First let's make a backup of your theme just in case any of the following steps go wrong and we need to roll back to a working version of the theme. I always start with this step and recommend everyone do so too. Go to Online Store > Themes then choose Actions > Duplicate. Easy and better safe than sorry!

 

Step 2

Go to Actions > Edit code and in the editor that loads, open the file Assets / theme.scss.liquid from the left folder pane. Scroll to the very bottom of that file and paste in the following code on a new line

 

#shopify-section-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  background-color: $colorBody;
}

body {
  margin-top: 120px;
}

 

Save and have a look at the result.

 

That's all there is to it. But for all the reasons I mention above, I'd not go with it unless you really are intent on using Minimal theme and prepared to learn more on your own on how to fix the issues with sticky navigation and this theme.

 

Best wishes!

I turn coffee in to code - since 1998
1 Like
New Member
2 0 0
Thanks so much for this!

I followed your instructions and it worked. I can see it's cutting off the
top part of my banner images from the homepage and other pages.

I thought to add a strip of white to the template I use for these top
images and try that. It has fixed the cut-off issue but I would need to
test this on more devices.

Do you think adapting the imagery I'm using as I have is a credible
solution?
0 Likes
Shopify Partner
1838 173 601

I wouldn't know. I don't know the address of your store ;-)

I turn coffee in to code - since 1998
0 Likes
Shopify Partner
10 0 0

Sir, this worked for me.  Thank you so much.  If it's not too much of a hassle, can you please teach me how to remove the white space above the logo.  I followed numerous suggestions from different threads but none of them worked.  

0 Likes
Tourist
29 0 1

This is new. I used the inspect fuction on google chrome and played around with the code.. The code below shows the Menu. The previous code showed the header including the logo of your site. with this new code there is no logo just the menu. Go to Themes, and Edit code. then Assets. Open 

theme scss liquid and paste the code at the very bottom. save and text it out

 

.site-nav {
position: right !important;
top: 140px !important;
z-index: 1 !important;
}

#PageContainer{
margin-left: 75px !important;
}


@J_Colette wrote:

 

Hello,

I have come across this topic on past posts but I'm ideally after someone to talk me through this in baby steps as my attempts so far haven't worked.

 

I am using the basic shopify theme Minimal. I'm looking to fix the top menu navigation so that wherever you visit on my website (any page, not just the homepage) the main menu stays at the top of the page.

 

I am familiar with very basic html coding.

 

All help greatly appreciated!


 

0 Likes
Tourist
29 0 1
This is new. I used the inspect fuction on google chrome and played around with the code.. The code below shows the Menu. The previous code showed the header including the logo of your site. with this new code there is no logo just the menu. Go to Themes, and Edit code. then Assets. Open
theme scss liquid and paste the code at the very bottom. save and text it out

.site-nav{ position: fixed !important; top: 140px !important; right: 200px !important; z-index: 1 !important; } #PageContainer{ margin-top: 75px !important; }
0 Likes
Tourist
29 0 1

Fixed Header Bar. Fixed Header. Fixed Navigation.

 

Play around with the numbers on this code to get the right design for your site. 

 

Here is my site. quintessencessentials.com

 

@media screen and (min-width: 500px) {
   .header-bar {     position: fixed;     z-index: 1000;     background: #4267B2;     width: 100%;     padding-bottom: 0.5rem;     top: -2.5px;
   } 
   .main-content {     margin-top: 25rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-header {     position: left;     z-index: 1000;     background: black;     width: 100%;     padding-top: 5rem;     top: 0px;
   } 
   .main-content {     margin-top: 5rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-nav {     position: fixed;     z-index: 1000;     background: black;     width: 100%;     padding-bottom: -10rem;     top: 15px;
   } 
   .main-content {     margin-top: 0rem!important;
   }
} 
0 Likes
Excursionist
12 0 4

Hi,

 

I added a fixed header to my Brooklyn theme a while ago, however, just recently i have noticed that it does not stay fixed and flashes away when loading a new page, then reappears, this isn't normally how it was working...

Has anyone had this before, or know if there is a relatively easy fix?

 

Thanks in advance

Luccardo.com

0 Likes
New Member
3 0 0

Thanks Karl.  This works.

 

Just wondering, is it possible to have fixed header for ONLY desktop.  I'd like the my page on mobile to be normal.

 

Thanks.

0 Likes