Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Styling Menu Items in Primary Navigation

Home Forums Support Styling Menu Items in Primary Navigation

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

    GeneratePress 1.4
    GP Premium 1.4.3
    #382257
    Gillian

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

    #382327
    Leo
    Staff
    Customer Support

    Can you link me to the site? Thanks!

    #382329
    Gillian

    Hi Leo

    It’s devel.sheffordosteo.com

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

    #382330
    Gillian

    Sorry – that should have read leave the Primary Navigation alone

    #382336
    Leo
    Staff
    Customer Support

    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.

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

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

    #382500
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.