Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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

    #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;
    	}
    }
    #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.

    #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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Reducing height of menu bar when viewed in browser’ is closed to new replies.