Archived topic
Mobile sticky navigation padding
8 replies · Started by ammgbr on March 3, 2023
Hi,
Tried using an old css for adjusting the mobile padding of my sticky navigation menu but did not work.
May I ask what should I be using? I want control for the padding in all directions.
Hi there,
just for the sticky mobile nav:
#mobile-header.is_stuck .inside-navigation {
padding: 20px 20px 20px 20px;
}
The 4 values are top right bottom left in that order.
Hi,
I'm afraid that's not worked. I've cleared cache still not effected.
I'm not seeing David's CSS being added to your site.
It should absolutely work - here is a demonstration using the browser inspector tool:
https://www.screencast.com/t/X8dURePxbpo
If you have already added the CSS then that means you might have some syntax error in your previous CSS that stops the code from executing.
Make sure all your @media has a closing bracket }.
Hi, I have double checked I cant see a syntax error. Will try again and see what happens
I have double checked I cant see a syntax error.
\
Hmm that's kind of the only reason why I can't see the CSS using the developer tool.
If it still doesn't work, can you move David's CSS to the very top of all your CSS to test?
thank you, managed to spot the syntax error!
Hi, I noticed that on scrolling down the padding is lost. Also, the padding on the right affects the search bar whereas I would expect it to set the menu icon that is on the right.
I've removed it for the time being, should the css factor for the menu being sticky?
I am lost here :)
The CSS o provided adds padding to the mobile header, and only when it sticky.
And if add that to your site using the browser developers tools it works.
So what is the issue ?