Mobile Menu Margin/Padding

a_zz7 · January 2015

I've searched the forum for the proper custom CSS without any luck. My question is, how can I increase the margin/padding distance from the top bar mobile menu? I have the page set to hide the subheader but if I don't increase the padding to the element (in this case a separator), then the mobile menu blocks the element. I do want the mobile menu to display on a tablet (below example is using iPad specs) but I don't want to increase the margin/padding on the element to compensate for the display on a tablet and have it significantly impact the look on desktop. Thanks in advance. See screenshot:

Albert · January 2015

Unfortunately we do not see screenshot and also you did not provided url to website what is necessary for us to give you right css.

a_zz7 · January 2015

Sorry about that.

http://dev.classiccoachwork.com/wordpress/ambler

http://dev.classiccoachwork.com/wordpress/wp-content/uploads/2015/01/mobile-display-issue.png

Albert · January 2015

We have checked your website already and don't know why it looks like that on your side because as we see everything is fine http://snag.gy/R1Zvv.jpg

a_zz7 · January 2015

That is because I changed the padding element to each of the elements directly. This has an effect on the display across the board. I would like to only change the padding when the mobile bar comes into play.

Albert · January 2015

So if you want to change it for mobile devices only, then you must plat with css as below:

@media only screen and (min-width: 768px) and (max-width: 959px) { /* your code for padding goes here */ }

And if you want to play with other screen sizes, then you must change only media screen sizes in the code.

Mobile Menu Margin/Padding

Comments