Brooklyn Theme: Hero below sticky header and nav size

Highlighted
Tourist
10 0 3

I searched all of the threads prior to posting this regarding this topic. Im surprised it hasn't been added as a option at this point as so many people inquire about it.

I am using the Brooklyn theme and installed the code for the sticky header, however the hero header is partially cut off as it is behind the navigation, which by default was designed as a transparent nav (never understood those haha).

I would like to have the hero header below the sticky navigation, previous threads that addressed this appear to be dated and the code has changed since then. 

And my second inquiry is regarding the vertical size of the navigation, any advice on how to make this shorter vertically? I would say half the size even. 

 

Thanks!

1 Like
Highlighted
Shopify Partner
7638 1050 2650

Hello, @deepred 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
10 0 3

Hello again Ketan

 

Here is the preview link:

 

https://ub7t0zwoc3dcfdh9-10315563104.shopifypreview.com

0 Likes
Highlighted
Shopify Partner
7638 1050 2650

@deepred 

Thanks for the Store URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index .main-content {
    padding-top: 96px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
10 0 3

Fantastic! Thanks so much Ketan.

I did notice one funny little quirk but not sure it has to do with the header, if you go to this page for example on desktop and scroll, you will notice the product title rolls over the navigation for some reason:

https://ub7t0zwoc3dcfdh9-10315563104.shopifypreview.com/products/rick-black-hat

And lastly, would you happen to know how to make the navigation shorter in vertical height?

 

 

0 Likes
Highlighted
Shopify Partner
7638 1050 2650

@deepred 

Thanks for the update can you please add this code also.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.header-wrapper, .header-container {
z-index: 99999;
}

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes