Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1213299

    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,

    #1213727

    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

    #1213951

    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 3 years, 9 months ago by sitadi.
    #1214195

    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

    #1214221

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

    #1214468

    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

    #1214544

    Hi Jordan,

    I did it but nothing changes..

    #1214633

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

    #1214762

    Hi,

    What css did you use to achieve this?

    Best regards,
    Jordan Shannon

    #1214779

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

    #1216757

    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

    #1216870

    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,

    #1219085

    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

    #1219884

    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,

    #1219927

    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

    #1219983

    Hey Luigi,

    Thanks for the input in this.

    Best regards,
    Jordan Shannon

    #1220027

    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

    #1220183

    Hi Luigi,

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

    Best regards,
    Rikard

    #1220814

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

    #1220928

    Hey sitadi,

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

    Best regards,
    Jordan Shannon

    #1221128

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

    #1221318

    Hi,

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

    Best regards,
    Jordan Shannon

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