Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 13, 2017 at 11:23 am #863853
    RollRolland

    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 7 years, 2 months ago by RollRolland. Reason: Code
    October 16, 2017 at 6:38 am #864671
    Ismael

    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

    October 17, 2017 at 9:14 am #865192
    RollRolland

    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

    October 19, 2017 at 6:12 am #866081
    Ismael

    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

    October 19, 2017 at 5:35 pm #866341
    RollRolland

    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 7 years, 2 months ago by RollRolland. Reason: precision
    October 21, 2017 at 5:31 am #866952
    Ismael

    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

    December 2, 2017 at 12:33 pm #884111
    RollRolland

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

    December 3, 2017 at 10:04 am #884284
    Rikard

    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

    December 4, 2017 at 10:08 am #884564
    RollRolland

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

    December 4, 2017 at 10:59 pm #884840
    Nikko

    Hi Rolland,

    Glad to hear that and thanks for using Enfold :)

    Best regards,
    Nikko

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