Archived topic
Styling Menu Items in Primary Navigation
8 replies · Started by Gillian on September 9, 2017
Hi
I'm using my Primary Navigation in place pf my header - having followed the instructions in Navigation as Header. My problem is that the Navigation log is too small so I've adjusted the the Menu Item Height to get it to the right size, but now the active page has a large coloured block round it which is making things looked unbalanced. I'd like to reduce the size of teh block colour round teh active page without altering thw height of the Navigation - maybe by putting some white padding round the active items to reduce the visual impact of the block.
Is that possible? If so, how do I do it?
Thanks
Further question - how do I turn off the link styling just for the Navigation Logo?
Can you link me to the site? Thanks!
Hi Leo
It's devel.sheffordosteo.com
I'm playing around with various elements at the moment but will leave the header alone.
Sorry - that should have read leave the Primary Navigation alone
Hmm for your case I would not use the navigation as header since the logo has lots of texts on it.
Try undo the steps in using navigation as header, then
- Upload a logo through Site Identity: https://docs.generatepress.com/article/adding-header-logo/
- Location to Float right: https://docs.generatepress.com/article/navigation-location/
Then you should be able to control the menu height separately.
Leo
I can't find the instructions for Navigation as Header now to undo them, please could you let me have the link.
Thanks
Hi Leo
I think I'm almost there now.
The only reason the logo has a lot of wording on is that it was the only way I could think of getting the telephone number and opening hours into the 'header' along with the Primary Nav.
3 issues on the header as it is now.
i) I've floated the Primary Navigation right, is there a way I can add anny margin/padding to move it down slightly from the top of the page.
ii) How do I get rid of the heavy blue block that appears when you hover over the logo?
iii) How wide can I go with the logo? I'd like to get the opening hours and phone number larger, so I'll have to play around with the text size in the image file, unless there is a way of getting the header set up with
Logo Widget with hours/number Primary Navigation
All lined up.
Any suggestions, gratefully received.
Thanks
Gillian
1) Try this CSS:
.main-navigation {
padding-top: 30px;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
2) Customizer > Colors > Header > Link Hover
3) Can be as wide as you like. Best to try it out :)
