How to make scrolling header and scrolling side bar on the pacific theme.

New Member
1 0 0

Hi.My site is

I would like my side bar fixed while scrolling, and also the header promo fixed while scrolling as well. 

Please advise on how to do this on my themes.scss.liquid, i have the pacific theme.




Shopify Staff
Shopify Staff
33 0 4

Hey Tina!

Richard M here from Shopify :)

Taking a look at the code for the Pacific theme, here's something that might be a good starting point! The only issue with this is, because of how the Pacific theme is put together, you will need to implement some code push the rest of the page down (which I will mention below this initial code).

On lines 6252-ish in your code you will find the code for the .main-header-wrapper which is what controls your top header area. You would need to add this code to that section of your code in order to keep it fixed in position at the top

position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
z-index: 99; 

This would likely be done by adding top-padding or top-margin for the .home-slideshow div which should be around line 3927 or there abouts :)

For the sidebar, the code would be a similar concept, but adjusting the code for .sidebar div.

One other thing to bear in mind, though, is that at mobile view, this will likely cause issues, so may not be super advisable. The header can appear too large if fixed at the top on mobile, and changing the code of the sidebar could potentially cause issues with mobile view too though it should disappear when loaded on that kind of device.

This theme is made by Pixel Union who offer great support too, so I would also suggested getting in touch with them about this type of thing (you can email them [here]( for further help!

Richard M

New Member
3 0 0

Can you help me add css to make my sidebar stay put while the rest of the page is scrolling in the simple theme.  I don't want my customers to have to scroll back up to see the side menu