How to make nav bar stay on screen while scrolling?

[Steve56]

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

[Alex_M3]

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!

[Steve56]

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.

[Steve56]

Not sure why she deleted her reply.. 

[Bill_3five]

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

[Steve56]

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

[Jonathan_Key]

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!

[Jonathan_Key]

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

[Arthur_Peterson]

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

[Steve56]

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!