Content hide behind fixed menu on mobile view

[pranabmistry]

I have a major issue with my site on mobile view. I am using YT framework & SJ News ii. I made the header sticky using the code below;

Code: Select all

#yt_menuwrap { 
position: fixed;
}
#yt_spotlight1 {
padding-top: 120px;
}

It works great with desktop view but on mobile view the height of the yt_menuwrap increases to 240px so I need to assign 240px as padding top on yt_spotlight1. How can I do this?

Need help. My site url: sitestalk.com

[JoomIa-Shark]

I think I am understanding what you are trying to do, but correct me if wrong.

I think you should make the containing div fixed instead, like this:

#yt_menuwrap {
position: fixed;
top: 0;
}

Then add the 240px padding to 'body'

[pranabmistry]

Thanks a lot for your quick response.

My site works good on big screen/desktop view, coz on desktop view, the height of the top bar is 120px, But if you open it on a smaller screen, then the logo goes to top & the height of the top bar increases to 240 px.

If you plz check my site on both type of screen then it will be clear.

Thank you once again.

[JoomIa-Shark]

Yes, but you can set up CSS for specific device width using media queries.

For example:

@media (max-width: 767px) {
#yt_menuwrap {
position: fixed;
top: 0;
}
}

Therefore it will not affect your website on devices wider than 767 pixels.

I hope that helps.

[pranabmistry]

Thanks Joomla Shark. In fact I was looking for this. It really helps.

[JoomIa-Shark]

No problem. Glad to help.