How to make nav bar stay on screen while scrolling?

Excursionist
38 0 4

How do you make the nav bar stay on the screen while you scroll? I'm using the Brooklyn theme.

1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
290 0 160

Hey there!

This isn't something that is wanted by all users, so it's not native to any Theme. That said, you can add a line of code into your CSS if you're handy with code or know someone who is:

http://stackoverflow.com/questions/24700184/how-do-i-force-a-vertical-scrollbar-to-appear

I hope that helps!

0 Likes
Excursionist
38 0 4

Hi Alex, thanks for your reply!

I'm not sure if we're talking about the same concept: it seems your link leads to a page that tells how two insert a special type of scrollbar. I'm wondering how to have a nav bar stay on the top of the screen while someone scrolls down.

One example of this feature is this very webpage, where the "ecommerce university" bar stays on the top of the page.

1 Like
Excursionist
38 0 4

Not sure why she deleted her reply.. 

0 Likes
Shopify Expert
29 0 8

Hi Steve,

Open your theme and navigate to theme.scss.liquid. Paste the following css at the bottom for a quick fix. I added a background color to avoid the text from being impossible to read. Feel free to change the background color.

.header-wrapper {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
}

If this doesn't work, please include a link to your shop and store password if needed.

Best,

Bill

3 Likes
Excursionist
38 0 4

Hey Billiam,

Thanks for the reply, as usual. I can always count on you. 

It worked, except I was also wondering:

  1. If there's any way to have the text more centered between the top and the bottom of the shaded are?
  2. I noticed that this sets the color of the nav bar, but doesn't put it in front of the page text. Is there any way to do that?

Thanks a bunch,

Steven

0 Likes
Shopify Partner
3 0 1

Can we make it so the background under the header only appears after scrolling down after the slider?

I've seen themes do it before like: http://themeforest.net/item/berger-wordpress-creative-agency-portfolio-theme/full_screen_preview/110...

 

Thanks!

0 Likes
Shopify Partner
3 0 1

I can help with Q1, add padding:

.header-wrapper {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.7);
  padding-bottom: 12px;
  width: 100%;
}

and adjust accordingly

0 Likes
Tourist
6 0 1

My theme doesn't have a theme.scss.liquid file. Is this possible with the Minimal theme?

1 Like
Excursionist
38 0 4

Hey Jonathan,

Adding padding helped center my text. Thanks a bunch. Do you know how to make the navigation bar smaller in general? 

 

EDIT: figured it out. Thanks!

0 Likes