Reducing height of menu bar when viewed in browser

This topic has 3 replies, 2 voices, and was last updated 10 years, 8 months ago by Sakin.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
March 7, 2014 at 6:43 am #21044

jmb500
Member

Hi. Using evolution pro. I notice when the browser size is reduced, or the site viewed on mobile, the menu bar increases by approx 20 px in height which i’d prefer not to happen as it is too large on mobile screen.

I’ve being trying for a few hours without success to change this, any way? I found it’s controlled by padding in responsive.css but I can’t work out how to control that in my child theme style.css

March 7, 2014 at 9:54 am #21049
Sakin
Keymaster
@jmb500: You can change the padding as per your need and then add the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
@media screen and (max-width: 960px) {	
	#header-menu .wrapper,
	#access-footer .wrapper {
		padding: 14px 0;
	}
}
```
March 7, 2014 at 5:28 pm #21055

jmb500
Member

Great! Thanks that did it.

That makes me think of another question regards the custom css field – Can I add the css code above into my child theme style.css instead? I’m just concerned when it’s in the custom css that it might get lost (I assume it would it get lost if I change theme?

Also, any way I can make menu buttons appear on right? I did find a way by moving the ul wrapper float to right but it puts the buttons in reverse order.

March 7, 2014 at 8:58 pm #21066

Sakin
Keymaster

@jmb500: Yes you can add that CSS in your Child theme style.css file. Custom CSS box is there to help you do quick edit of css. The css added in Custom Css will not be lost. But if you want my opinion then I would suggest child theme.
Author

Posts