Smaller navigation menu

jamessawfordgolf · Member · Nov 23, 2015 at 9:55 pm
Copy link

Add topic to favorites
Hi. I’m trying to reduce the height of the main menu bar and also get all menu text on one line (there’s loads of room to the right). I have tried in CSS but failed. Please help!

http://jamessawford.co.uk

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 24, 2015 at 5:49 am
Copy link
Hi there, the first CSS rule below takes the menu full width so that it doesn’t wrap – or at least doesn’t until someone views your site on a narrow screen/window.

Now for the challenging part. If you make the menu less tall, when the menu wraps to a second line, the menu items on the second line end up being virtually invisible since they are almost outside of the bottom edge of the red. You can play with the second two rules below. The first set the min-height of the red background area and the second rule set the padding on top and bottom of the text so that you can center it.
```
#page .main-navigation > div {
    width: 100%;
}
.site-header {
    min-height: 90px;
}
.no-js .main-navigation, .main-navigation {
    padding-top: 24px;
    padding-bottom: 24px;
}
```
jamessawfordgolf · Member · Nov 24, 2015 at 8:16 am
Copy link
Thank you SO much – I’ve learned a valuable lesson there. Don’t go round the houses for hours trying to fix the problem – get an expert involved and focus on more important stuff in your business!

Thanks again. Problem solved in 30 seconds!
thesacredpath · Member · Nov 26, 2015 at 1:20 am
Copy link
You are welcome, and yes, if you try and something is taking too long, you know where we are. Concentrate on your business. :)

No items found.