BROOKLYN THEME: Sticky header with Logo

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
Shopify Staff
Shopify Staff
438 23 62

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