Okay
  Public Ticket #1062087
Styling Subnav
Closed

Comments

  •  3
    Christopher started the conversation

    I am using subnav feature to display the nested nav elements within my top main nav. I just want to override the existing style of the dropdown (background color, font size and style and color and hover effects, etc). 

    Usually I'd do this by selecting in my browser, going to Inspector, toggling "hover" state to keep the dropdown active and then learning what CSS styles do what and then going into my custom style sheet and overriding those.

    But for some reason nothing I do can keep a submenu from staying activated? 

    Any trick you can suggest?

    Thanks,

    -Chris

    (I have no live link to share since I'm doing this locally on my machine, first, and then will apply to our live corporate site).

  •  3,030
    Andrew replied

    Hi Christopher,

    I hope you are having an awesome day and thanks for contacting us regarding your query.

    You could try using the SiteOrigin CSS plugin to help you in generating the Custom CSS you need:

    https://wordpress.org/plugins/so-css/

    Here's a video that should help you with learning how to use it:


    Please let me know if there are any more questions that I may answer for you :)

    Cheers! 

  •  3
    Christopher replied

    Nice, Andrew .. it's a pretty good looking plugin, but a couple issues:

    1. 1adding yet another plugin to the theme (ha) for stuff like this always goes against my better judgement
    2. more importantly: the same problem persists – the submenu pulldown for the main nav that shows on hovering over the nav item does not persist, thus I can't click on it, or rather I can click on it, and get the CSS styles for it and the left hand drawer, but the nav goes away after a few seconds so I can't really see any changes I make in realtime, which goes against a little of what I'm trying to do in the first place. 

    Any tips on that?

  •  3,030
    Andrew replied

    Hi Christopher,

    Thanks for keeping in touch with us.

    There's a little trick in the Chrome Developer tools that you could use:

    1. Right click the page and click Inspect Element.
    2. Go to the Sources tab
    3. Hover on the menu to reveal the sub menu
    4. Press F8 or fn+F8 (depending on what device you're using)

    The entire page should freeze and going back to the elements tab should give you the ability to edit CSS. 

    I hope this helps

    Cheers!