Home / Forums / DynamiX Support / Modifying the look of the menus?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • sethdotterer_sc
    Participant

    What is the best the way to modify the look of the top navigation menus?

    Is there a better way than hacking away at the CSS in a child theme?

    I’d like the top item of the a drop down menu to highlight with a background color that connects it the drop down menu when selected and also modify the overlap and positioning of the submenus as well as making stylistic changes.

    Any suggestions would be much appreciated. Would be happy to provide a screen shot of the look I’m going for if there is way to do that.

    Hi @sethdotterer_sc

    Can you please over your site’s URL and a screenshot/mockup of how you want the menu to look so we can check if it can be easily achieve the look you want?

    Regards,


    sethdotterer_sc
    Participant
    This reply has been marked as private.

    Hi

    I can’t exactly copy the look as it will require a few more customization but this should get you started so you can modify it further to match the look that you want. Copy these CSS and paste it inside Appearance > Theme Options > Customize

    #header.divider-disabled #nv-tabs ul ul {
        left: 0px;
    }
    
    #nv-tabs ul li a {
        border-radius: 5px;
    }
    
    #nv-tabs ul li a:hover {
        background-color: #f9f9f9;
    }
    
    #nv-tabs ul li ul li:before {
            content: "";
        border-color: transparent #111;
        border-style: solid;
        border-width: 0.35em 0 0.35em 0.45em;
        display: block;
        height: 0;
        width: 0;
        left: 0em;
        top: 0.9em;
        position: relative;
      
    }
    
    #nv-tabs ul li ul li a {
        padding: 0 10px 0 10px;
    }

    sethdotterer_sc
    Participant

    Thanks. That looks pretty good.

    Is there any way to keep the background on the top level element when you move the mouse down over the sub menu? It should stay on as long as you are over a sub-menu or sub-sub menu.

    Otherwise this is a good start, I can figure out the rest of the styling.

    Hi

    Here’s a better alternative. Remove this block from the CSS I sent:

    #nv-tabs ul li a:hover {
        background-color: #f9f9f9;
    }
    

    Then replace it with:

    #nv-tabs ul li:hover {
        background-color: #f9f9f9!important ;
    }

    Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.