Sticky bar doesn't adjust when container dimension height above it is decreased for mobile displays

[webraven]

Hello!

I have a header bar that has a dimension height of 125px. And, I’m using sticky on this bar and another just under it. It allows for a nice amount of spacing around the logo and other elements when viewing on desktop resolutions.

However, on mobile resolutions I would like to reduce this height to save space especially on phones. The problem is when I adjust for this in my CSS, the sticky bar underneath stays in place now with a gap between the 2 bars.

Please see screenshots. URL is: d5teeth.com

[prakash_s]

Hello @bill2,

Thanks for writing to us.

I would suggest you add multiple bars, You can keep one for desktop, larger screen and another one for a small device like a mobile phone.

To hide and show bar in mobile and desktop, click on the Bar’s Magnifier icon to inspect —> customize
Please have a look at the screenshot given below.

In case if you haven’t seen our doc for hiding/show content on different breakpoint please have a look at it. https://theme.co/docs/hide-or-show-content-by-device-size

I would also like to suggest you reduce the logo size since your logo height is 125px in mobile.
I would recommend you to set the bar height as auto in the mobile version bar as well.

Please have a look at the screenshot given below.

Alternatively, you can use custom CSS to reduce the height of Header through media query CSS for that you need to learn CSS and learn how to use the browser’s element inspector. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope it helps
Thanks

[webraven]

Thank you for your reply.

I’m currently making use of some crafty hide/show settings. So, I have that down. I totally could simply create another main bar for that section on the 2 small breakpoints.

Thanks for the fresh perspective!

[ruenel]

You are most welcome. It is good to know that it works for you.