Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #863853

    Hello,

    Colors
    Found how to change menu-item-top-level, sub-menu background and their links for each menu in desktop version.
    If it’s correct and it can be useful

    
    /*background color*/
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(x) > a { background-color: green; color: white; }
    /*or simple color*/
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(x) > a { color: green; }
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(x) > a:hover { color: blue; }
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(x).current-menu-item > a, 
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(x).current_page_item > a { color: orange; }
    /*background sub-menu*/
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(x) > ul.sub-menu > li.menu-item > a{ background-color: green; }
    

    But do not ul.sub-menu border color and the rollover stroke.
    Is-it a simple way to do this.and to have the same menu for burger please ?

    Languages
    We choosed the WPML selector.
    A better way than to give a display:none to li.av-language-switch-item which else does not work in burger menu please ?

    Best regards

    • This topic was modified 6 years, 5 months ago by RollRolland. Reason: Code
    #864671

    Hey RollRolland,

    Thank you for using Enfold.

    If you don’t mind, please provide a screenshot of the layout that you want. Use imgur or dropbox. Please note that you can alter the style of the main menu items in the Enfold > Advanced Styling panel.

    Best regards,
    Ismael

    #865192

    Hi Ismael,

    Please note that you can alter the style of the main menu items in the Enfold > Advanced Styling panel.
    Yes thank’s, but we try to display a different color for each first level menu and its sub-menu.
    Good idea, definitely more accurate with images. Link in private content.
    I hope it will be clearer .

    Best regards
    Rolland

    #866081

    Hi,

    Thank you for the screenshot. Please use the following css code to change the sub menu background and color.

    .header_color .main_menu .menu ul li a {
        background: green;
        color: white;
    }
    
    .av-main-nav ul li a {
        border-color: blue;
    }

    Adjust the values as needed.

    Best regards,
    Ismael

    #866341

    Hi Ismael,

    I try again to explain what we are looking for :
    1 / menu colors
    Y’ouve certainly seen on image 2 that each menu text has a different color.
    But the hover and active strokes no. Always the same, default blue in this case.
    We would like to change this unique color to have the same colors as those of the menu texts.

    2 / sub menu
    The question is not about links backgrounds or colors but the entire sub menu border.
    How to remove or customize it please?

    We just need the CSS tree with the corresponding classes.

    Thank’s for your attention.

    Best regards.

    Rolland

    • This reply was modified 6 years, 5 months ago by RollRolland. Reason: precision
    #866952

    Hi,

    1.) You can try the following css code to change the “stroke”.

    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(2) .avia-menu-fx {
        background-color: red;
        color: #ffffff;
        border-color: red;
    }
    
    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(2) > ul {
        border-top-color: red;
    }

    The code above will change the hover effect of the “Le Camping Club” menu item.

    2.) The following css code should change the border of the submenu container.

    .av-main-nav ul li a {
        border-color: blue;
    }

    Again, you can use nth-child selectors if you want to apply different border colors.

    .header_color .main_menu ul:first-child > li.menu-item-top-level:nth-child(2) a {
        border-color: blue;
    }

    Best regards,
    Ismael

    #884111

    Hi Ismael,
    I was on other projects.
    Your answer is the right one.
    Thank’s a lot.
    Best regards.
    Rolland

    #884284

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #884564

    Hi,
    I searched unsuccessfully how to close a topic.
    Now I know how, and yes you can close it.
    Thank’s.
    Best regards,
    Rolland

    #884840

    Hi Rolland,

    Glad to hear that and thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Customizing the Main Menu colors and language items’ is closed to new replies.