Tagged: ,

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • May 15, 2020 at 2:55 pm #1213299
    sitadi

    Hi,
    I am trying to change the background color of the submenu (different color for each submenu, depending on the area of activity). It works for the menu, but not for the submenu, can you explain to me how?
    I created CSS for each color in the “quick CSS” field but the submenu does not appear with the colors chosen,

    thank your for your help,

    May 17, 2020 at 4:29 am #1213727
    Rikard

    Hey sitadi,

    Here’s an example for the first menu item:

    #menu-item-79 .sub-menu li a {
    background: yellow;
}

    Simply change the parent menu item ID for the others.

    Best regards,
    Rikard

    May 18, 2020 at 9:23 am #1213951
    sitadi

    I tried to color the “Aide à la personne” submenu in the “A domicile” menu:

    # menu-item-227 .sub-menu li a {
    background: # F29401;
    }

    but nothing changes ..

    • This reply was modified 4 years, 7 months ago by sitadi.
    May 19, 2020 at 6:24 am #1214195
    Rikard

    Hi,

    You can’t use spaces like in your code, please follow the format that I gave you:

    #menu-item-227 .sub-menu li a {
  background: #F29401;
}

    Best regards,
    Rikard

    May 19, 2020 at 8:31 am #1214221
    sitadi

    Hi,
    I copied and pasted the code you told me, but it doesn’t work either..

    May 20, 2020 at 12:31 am #1214468
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, please clear the cache a few times over.

    Best regards,
    Jordan Shannon

    May 20, 2020 at 8:21 am #1214544
    sitadi

    Hi Jordan,

    I did it but nothing changes..

    May 20, 2020 at 12:32 pm #1214633
    sitadi

    I have created color’s class and it work fine in mobile menu, but not in desktop menu.. see attached screenshot

    May 20, 2020 at 9:03 pm #1214762
    Jordan Shannon

    Hi,

    What css did you use to achieve this?

    Best regards,
    Jordan Shannon

    May 20, 2020 at 9:20 pm #1214779
    sitadi

    Hi Jorsdan,
    Please find links to screenshots that explain how I did it

    May 27, 2020 at 1:35 am #1216757
    Jordan Shannon

    Hi,

    Apologies for the late reply. You would essentially have to target each link id manually to give its own individual color, or in one big group class to color each parent and child links the same color.

    Best regards,
    Jordan Shannon

    May 27, 2020 at 10:21 am #1216870
    sitadi

    Hi Jordan,
    can you try to take control of my site and color the “key figures” sub-menu under the “home” tab in orange for example and explain me how you do that ? All the attempts I have made have failed
    Thank your for your help,

    June 3, 2020 at 2:55 pm #1219085
    Ismael

    Hi,

    Sorry for the delay. You can use this css code to change the color of the sub menu items under “home”.

    .menu-item-121 ul li {
	background: orange;
}

    As you may notice, there is a number or integer (121) in the css selector above. That number is the menu ID, so you should be able to target the rest of the menu items by using the same pattern and by changing the menu ID to the ID of the next menu item that you want to adjust.

    Another example:

    .menu-item-79 ul li {
	background: orange;
}

    This is the same css but this time, we change the menu ID to 79, so it will apply the changes to the “a domicile” menu item instead of the “home” menu item.

    You should be able to see the ID of the menu items by inspecting the elements in the browser dev tools.

    // https://developers.google.com/web/tools/chrome-devtools

    Best regards,
    Ismael

    June 5, 2020 at 6:26 pm #1219884
    sitadi

    Hi,

    I use the code :
    `.menu-item-227 ul li {
    background: #F29401;
    }
    to change the color of “Aide à domicile” under “A domicile” but nothing changes.
    Can you please put the code and try to change a color directly on my site ?

    thank you for your help,

    June 5, 2020 at 8:22 pm #1219927
    BigBatT

    Hi @sitadi,
    play with the CSS style you like.
    Good job

    Best regards
    Luigi

    #top #wrap_all #header .sub-menu li#menu-item-72 > a {		
    background: red;
}
#top #wrap_all #header .sub-menu li#menu-item-116 > a {		
    background: green;
}

    Change #menu-item-xx according to your menu
    Sub Menu Backgrund

    June 6, 2020 at 6:03 am #1219983
    Jordan Shannon

    Hey Luigi,

    Thanks for the input in this.

    Best regards,
    Jordan Shannon

    June 6, 2020 at 11:12 am #1220027
    BigBatT

    Hi @jordan_s,

    You’re welcome
    Belowe the css code more complete ;)

    /* Change background color */
#top #wrap_all #header .sub-menu li#menu-item-72 > a {		
	background: #ec6a1f;
	border: none !important;
}
#top #wrap_all #header .sub-menu li#menu-item-116 > a {		
	background: green;
	border: none !important;
}

/* Change color link text */
#top #wrap_all #header .sub-menu #menu-item-72 span, 
#top #wrap_all #header .sub-menu #menu-item-116 span { color: #ffffff !important; }

/* Hover state background color */
#top #wrap_all #header .sub-menu li#menu-item-72 > a:hover {		
	background: #555555;
	border: none !important;
}
#top #wrap_all #header .sub-menu li#menu-item-116 > a:hover {		
	background: #555555;
	border: none !important;
}
/* Hover color link text */
#top #wrap_all #header .sub-menu #menu-item-72 span:hover, 
#top #wrap_all #header .sub-menu #menu-item-116 span:hover { color: #ff6600 !important; }

    Best Regards
    Luigi

    June 7, 2020 at 1:24 pm #1220183
    Rikard

    Hi Luigi,

    Thanks for sharing, it’s much appreciated :-)

    Best regards,
    Rikard

    June 9, 2020 at 10:42 am #1220814
    sitadi

    Hi,
    Thank you all for your help ! :D
    Best regards

    June 9, 2020 at 7:06 pm #1220928
    Jordan Shannon

    Hey sitadi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    June 10, 2020 at 10:40 am #1221128
    sitadi

    Hi,
    You can close this topic, thank you.
    Best regards

    June 10, 2020 at 6:40 pm #1221318
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Submenu color’ is closed to new replies.