Add a Floating Navigation bar/Header to Brooklyn Theme

New Member
15 0 0

Is there a way to make the navigation bar float as you scroll down the screen?  I've seen it being done with the Venture Theme, I would like to create the same effect using the Brooklyn theme if possible.

I have tried to make this work, but other posts only show how to make the header stay put- but it messes up the margins on al pages except for the homepage - I want to header to float with the page scroll, not just stay as a block at the top, if that makes sense.  In the Venture theme the header shrinks a little smaller while you are scrolling the pages.

Any help would be greatly appreciated.

Thank you!

0 Likes
Shopify Staff
Shopify Staff
537 0 71

Hey there, James!

I think I understand what you're trying to do. In order to add that sticky menu, navigate to Online Store>Themes and select "Edit HTML/CSS" from the Actions menu on Brooklyn. 

Once there, select the theme.scss.liquid file from your Assets folder. Scroll all the way to the bottom of the file and paste this code: 

.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 {
}

Let me know if that does the trick!

Savannah | Shopify Guru
support@shopify.com

1 Like
New Member
15 0 0

Thank you Savannah, it kind of works....

I would like to keep a white background for the nav and push down the rest of the page so it is not overlapping, similar to how the sticky header works in the venture theme.

 

Does that make sense?

 

Thanks!

0 Likes
New Member
1 0 0

Hi James

Curious to know if you found the answer to your second query?

I'm trying to do the same thing but cant get a definitive answer.

Thanks!

0 Likes
New Member
2 0 0

Hello Savannah

I looked at doing this before with my favorite theme (Brooklyn) but as most of the discussions seemed to have many problems I gave up, today I came back to it and found your suggestion for James and after pasting this into my theme.scss it works perfectly for me on desktop and mobile because of your code :)

You are an absolute star!!! Thanks so much for your post reply and code!

Have an awesome weekend!

Mark

0 Likes
New Member
2 0 0

I'm using Brooklyn as well and I was wondering if ther was a way to isolate this sticky header to JUST the home page?

I love it over my home page but when navigating the rest of my shop I'd like to have a regular fixed header at the top of the page.

0 Likes
New Member
3 0 0

Hi , when I insert this code everything goes crazy... ! what can I do ? I have brooklyn theme!

0 Likes
New Member
11 0 0

Just came across this and, must add thanks to Savannah F!

Be good to know how to add a background (as it sometimes looks a little weird depending on background colour), but in terms of adding sophistication and value to the site, fantastic!

0 Likes
New Member
12 0 0

Hi,

I tried this code at the end of theme.scc.liquid file but says that an error prevents me from saving this.

Update: Worked after closing it and openening a fresh screen.

0 Likes
New Member
6 0 0

How did you get it to work? I tried adding the above code to my theme and it completly throws off my whole theme. 

0 Likes