Needing help with Navigation Styling

I'm trying to get my navigation to align like this site found here.. BeMindfulOnline.com.. that 3x3 style.. so stuck! screenshot attached

Thanks,

ME

  • Predrag Dubajic
    • Support

    Hi @ME Admin,

    Thanks for the link, that's what mattered the most :slight_smile:

    Can you try with this CSS code and see if that's what you wanted to do:

    #top-menu-nav #top-menu li {
        float: left;
    }
    
    #top-menu-nav #top-menu li:nth-child(3n+1) {
        clear: left;
    }

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hey ME Admin,

    I hope you're having a nice day!

    I'm not sure whether you're referring to the spacing between menu elements or for an entire menu so let me suggest solutions for both :slight_smile:

    To adjust spacing between menu elements replace this code (that Predrag shared):

    #top-menu-nav #top-menu li {
        float: left;
    }

    with this one:

    #top-menu-nav #top-menu li {
            float: left;
    	margin-left:10px;
    	margin-top:5px;
    }

    Adjust "margin-left:" value for horizontal (menu column) spacing and "margin-top:" value for vertical (rows).

    As for entire menu block. To move it a bit up or down you may want to add this CSS and adjust "padding-top:" value:

    #et-top-navigation {padding-top:10px;}

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.