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

    Hello there,

    How can i do this fullwidth menu? http://www.maxlaw.co.za (the blue one, under the main menu?)
    http://pasteboard.co/1Js03hOU.png

    How can I put the position of the menu items so they aren’t centered?

    How can I change the background color in Blue?

    How can I change the letters in white?

    Thanks!

    #587342

    Hi danielgulau!

    Please use the full width submenu element in Advanced Layout Editor

    To make the menu share equal space add this css in Enfold > General Styling > Quick CSS

    /* Equal Spaced Menu */
    .av-main-nav {
        display:flex;
        justify-content: space-between;
    }

    If you still have any issues please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

    Best regards,
    Vinay Kashyap

    #587732

    Hello Vinnie,

    Thanks for your answer, but it is not working. The menu is still centered. I need them not to be in the center

    also, my other questions:
    How can I change the background color in Blue?
    How can I change the letters in white?

    Thanks in advance

    #588293

    Hi!

    Please share the link to the page where we can see the element in question and provide you custom CSS :)

    Best regards,
    Vinay Kashyap

    #588303

    Here the link:

    #588593

    Hey!

    Add the below provided code to Enfold > General Styling > Quick CSS

    Please feel free to change the blue to any color value you like.

    /* Custom Menu Styles*/
    .av-subnav-menu {
        display:flex;
        justify-content: space-around;
        background:blue;
    }
    
    #top .av-submenu-container, .av-submenu-container {
        background-color: transparent;
        border:none!important;
        max-width:1200px;
        margin:0 auto;
        left:50%;
        transform:translateX(-50%);
    }
    
    .av-submenu-container li:hover {
        background-color:red!important;
    }
    

    To remove the divider in the menu go to Enfold > General Styles > Logo Area > Border colors
    Delete the color value and save changes

    or

    Enfold > Header > Separator between menu items > No Separators

    Cheers!
    Vinay Kashyap

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