BROOKLYN THEME: Sticky header with Logo

Highlighted
New Member
6 0 0

Hello,

I know this is probably a repeat ask but I have read through multiple other forums in shopfy which are outdated at this point but still gave them a shot and could not make my header + logo always visible. Could someone kindly help me out with this favor and provide me with a snippet of could that will actually work and main webpage and mobil. Really appreciate some help with this. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
911 60 159

Hi, Joseph

This is Dallas from the Social Care Team here at Shopify. I would be more than happy to help you edit the header in your Brooklyn theme. 

For this customization you will need to do a little adjustment in the code, but it is just in one spot. If you don't feel comfortable doing this yourself you can reach out to a Shopify Expert and they will be more than happy to set this up for you.

If you do decide to do it yourself all you will need to do is go to your Store Admin and click on Online Store > Themes. On the Brooklyn theme you will see a button that says Actions, click on that and then click on Edit Code

When you are in the code editor you will see a section on the left with different categories. Click on Assets > Theme.scss.liquid. This will bring you to the theme's CSS file where you will be able to paste this bit of code at the bottom of the page. 

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

After you have pasted that you will just want to make sure that you click on the Save button in the corner. 

Once the code has been saved you can go and take a look at your site to see your beautiful work. You will see the header and logo are fixed when you start to scroll down the page. 

I hope that this has helped you, If you have any more questions please don't hesitate to reach out again. Our support team is here 24/7 to help you out. 

Dallas
Shopify Social Care Team

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

Hi Dallas,

 

I am having trouble selecting colors- where should I be looking and am I able to simply change it to white FFFFFF for now? 

 

 

TIA :)


0 Likes
Highlighted
New Member
2 0 0

Hi, Dallas, I added your code to the theme liquid, and it does make the logo and menus remain in place as you scroll, but the menu text for me is white, so the menues disappear as soon as the slider passes up. Is there a way to make them switch to black, or have a background just under the menu space remain, such as a black bar or any color you choose? Thank you, just wondering.

 

--Rick Shelton

0 Likes
Highlighted
New Member
1 0 1

Hello, when I try this it causes a padding issue with the main-content. How do I tell the pager to start after the header? Screen Shot 2019-09-23 at 11.35.49 PM.png

Highlighted
Tourist
7 0 2

Hello there!

 

I also have an issue with my featured collection images on the home page of my Brooklyn theme. I wanted to add hover effect and added below code to the bottom of my theme.scss.liquid and it worked but not it has a white overlay?or extreme transparenct on all images. I can barely see the image. 

How can I fix this? 

 

Many thanks in advance.

my url: https://lookmonk.com/?fts=0&key=ce98c38ad71b787e33b0991c728c413cb918239982241ce11099c6328f912286

 

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 0; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

footer.site-footer.small--text-center {
    font-size: 12px!important;
}

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

 

0 Likes
Highlighted
Tourist
4 0 8

Doing as Dallas suggests means that there is no menu close button if the menu is opened on mobile anywhere but the top of the page. I had to make a small change. Including the header container class in the first section avoids that problem.

 

.header-wrapper

 

becomes 

.header-wrapper, .header-container

 

 

Like so...

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

 

 

You'll also need to push the content down so that the header doesn't overlap the content...

 

I did...

.main-content {
    padding-top: 80px;
}

 

 

I then found that the express payment buttons (paypal/Google pay etc) scrolled over the top of the header. That was fixed with ...

.shopify-payment-button {
    z-index: 0;
}

So the entire code to do this properly is...

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
.main-content {
padding-top: 80px;
}
.shopify-payment-button {
z-index: 0;
}

 

Highlighted
New Member
5 0 0

Hey sila-monk, i was wondering if you had any success with implementing the hover code with your site? I noticed that your site had it enabled. When i copied your code and added it to my brooklyn theme, nothing happens. Do you have any suggestions or did you make any further tweaks? Thanks in advance

0 Likes
Highlighted
New Member
2 0 0

Hi so I saw your post that helped me make my header fixed and did wonders for my website however I am stuck on an issue. I did adjust the px so the header wouldn't run into my page content and it pushed my page down correctly however it doesn't work on the rest of my pages in the site.  On all my product pages, the beginning of the content gets tucked under the fixed header. so I am wanting to do one of two things with the first being my preference. 

 

my page : https://www.mybeautymyway.com

 

1. Make the home page the only one that has the sticky header and leave all the other pages alone

or 

2. If there is some code out there that can push the rest of my website pages down below the sticky header so everything can be displayed properly. 

 

please help

 

to reference the code i was using to make my header sticky in my brooklyn theme

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
.main-content { 
  padding-top: 260px; 
}
.shopify-payment-button {
  z-index: 0; 
}

 

0 Likes
Highlighted
Tourist
4 0 8
try something like...