Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 24, 2022 at 5:41 pm #1342163
    sitadi

    Hi,
    I want to display the main menu with different colored buttons. Can you explain to me how to proceed?
    I don’t want a color in the background of the menu (as I did in the last 3 tabs), but a color in the button like the first tab of my menu (see attached link)
    Thank you for your help,
    IB

    • This topic was modified 2 years, 8 months ago by sitadi.
    February 24, 2022 at 7:33 pm #1342174
    Rikard

    Hey sitadi,

    Please select the bordered button option under each menu item under Apparance->Menus, then you can use CSS like this:

    #menu-item-105 .avia-menu-text {
  background: green; 
}

    It will target the menu item which currently has an orange background. You can follow the same structure for the other menu item, simply replace the menu item ID in the example code above. You can find the ID by inspecting each menu item in your browser.

    Best regards,
    Rikard

    February 24, 2022 at 8:10 pm #1342180
    sitadi

    Hey Richard,
    Thank you for your help.
    I just tried but it colors the background of the submenu text, but not the background of the main menu buttons..?

    February 24, 2022 at 10:04 pm #1342187
    Yigit

    Hi,

    Please use the code as following

    #top #wrap_all #menu-item-105 .avia-menu-text {
  background-color: yellow;
  border-color: green;
  color: red;
}

    Please make sure that you chose to display your menu item as button – https://kriesi.at/documentation/enfold/menu/#toggle-id-41

    Best regards,
    Yigit

    February 24, 2022 at 10:12 pm #1342188
    sitadi

    Great, it works! Thanks very much :D

    February 24, 2022 at 10:15 pm #1342189
    sitadi

    Just a new problem in the submenu, I have added “padding: 20px;” in order to increase the padding inside the button but in the submenu everything overlaps, an idea ?

    is it possible to also change the color of the submenu so that it is identical to the color of the button? and space the labels of the mega sub-menu so that they do not overlap following the insertion of my padding?

    • This reply was modified 2 years, 8 months ago by sitadi.
    February 25, 2022 at 11:26 am #1342262
    Rikard

    Hi,

    Please try this CSS as well:

    #top #header .avia_mega_div > .sub-menu > li > ul li {
    margin-top: 35px;
}

    I’m not sure I understand exactly what you are looking to achieve with the sub menu items, could you post a screenshot highlighting your intentions please?

    Best regards,
    Rikard

    February 25, 2022 at 11:35 am #1342265
    sitadi

    Hi,

    Please find a screenshot of my issue issue in the submenu

    I want to enlarge the line spacing between the lines of the sub-menu and I would like the background color of each sub-menu to be the color of the button of the corresponding menu. in the attached example, the background of the sub-menu would be totally orange and the texts readable.
    Thank you very much

    February 25, 2022 at 4:03 pm #1342293
    Rikard

    Hi,

    Thanks for the update. I added the CSS posted for you, and that seems to have worked. What I’m not sure about is your second question?

    is it possible to also change the color of the submenu so that it is identical to the color of the button? and space the labels of the mega sub-menu so that they do not overlap following the insertion of my padding?

    Best regards,
    Rikard

    February 25, 2022 at 5:21 pm #1342306
    sitadi

    Yes it is ok for the padding, thank you

    My second question is : how can I assign the same color to the button and the background of its submenu? (different background color on each sub-menu depending on the color of the selected menu)
    >> When the menu button is red, I would like the background of this button’s submenu to be red,
    >> when the menu button is green, I would like the background of this button’s submenu to be green,
    >> etc.
    background color different on each submenu
    Many thanks,

    February 25, 2022 at 7:24 pm #1342324
    Rikard

    Hi,

    Thanks for the update and clarification. You would need custom CSS for that as well, there’s no automatic way of doing it. Please try targeting the sub menu for each menu item, like so:

    #menu-item-105 .sub-menu > li > ul li .avia-menu-text {
    background: red;
}

    Best regards,
    Rikard

    February 25, 2022 at 7:46 pm #1342326
    sitadi

    I have tested your css code but it not works, I finally try these :

    #top #wrap_all #menu-item-105 .avia_mega_div ul {
    background-color: #FF901B;
}

    #top #wrap_all #menu-item-105 .av-main-nav ul > li > a {
    color: #FF901B;
    }

    and now there are still some white backgrounds that I would like to remove, but I can’t, please see below :

    white

    • This reply was modified 2 years, 8 months ago by sitadi.
    February 25, 2022 at 9:54 pm #1342339
    sitadi

    I added this css code :
    `.header_color .main_menu .menu ul li a {
    background-color: transparent !important;
    }

    and now it is ok,

    Thank you for your help,

    February 26, 2022 at 1:45 pm #1342368
    Mike

    Hi,
    Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Main menu with different colored buttons’ is closed to new replies.