Minimal Theme - Fixed Main Menu - HELP!

[J_Colette]

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!

[KarlOffenberger]

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!

[J_Colette]

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?

[KarlOffenberger]

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

[Edgar]

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.  

[elizsia]

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!

---

[elizsia]

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; }

[elizsia]

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;
   }
} 

[Luccardo]

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

[Ethan_L]

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.