[Support request] Styling Menu Items in Primary Navigation

[Gillian]

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

[Gillian]

Further question – how do I turn off the link styling just for the Navigation Logo?

[Leo]

Can you link me to the site? Thanks!

[Gillian]

Hi Leo

It’s devel.sheffordosteo.com

I’m playing around with various elements at the moment but will leave the header alone.

[Gillian]

Sorry – that should have read leave the Primary Navigation alone

[Leo]

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.

[Gillian]

Leo

I can’t find the instructions for Navigation as Header now to undo them, please could you let me have the link.

Thanks

[Gillian]

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

[Leo]

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 🙂

[Author]

Posts