Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 24, 2016 at 7:44 pm #691224
    pspani63

    Hi,

    I created an Mega Menu at the page. The main menu is oke. But i have now some difficulties with the Services submenu. I hope you can help with the correct CSS code to change:
    a. the submenu items and the ‘Hover’ background color in the same red color as the main menu items;
    b. change the submenu text; when i hover over the text i don’t want it to be underlined;
    c. the width of the submenu columns and the alignment; when i hover over the text of ‘Consultancy’ there is now to much “orange space” at the left. I would like to reduce this orange space at the left and have more orange space at the right; i tried to change the padding but this did not work.

    Thanks,
    Paul

    September 26, 2016 at 5:45 am #691460
    Jordan

    Hey Paul,

    Sorry for the delay in response!

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #top #wrap_all .avia_mega_div {
    background-color: #BE2030;
    border-color: #BE2030;
}

#top #header .mega_menu_title a {
    margin-left: -50% !important;
}

    Best regards,
    Jordan

    September 26, 2016 at 8:50 pm #691930
    pspani63

    Hey Jordan,

    Thanks a lot for your response. I added the code under Enfold> general styling and it’s better now.
    But the hover color in the dropdownmenu is not oke yet; as you can see at the page When someone hovers over the Consultancy menu i want it totally to be the color #BE2030; now the hover color only shows in the text area.
    Furthermore i would like to change the width of the dropdowmenu; it has to be almost the same width as the main menu and just a little bit wider..

    Hope you can help me with this.

    Best Regards,
    Paul

    September 29, 2016 at 4:38 pm #693218
    Vinay

    Hi,

    By Consultancy do you mean the button that appears in the icon block as shown in the below screenshot ?

    You can change the button color from the button options.

    To make the menu the same width of the main menu try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    ul .sub-menu {
    width: 958px!important;
    min-width: 958px!important;
    transform: translateX(-223px);
}

    Best regards,
    Vinay

    September 29, 2016 at 6:45 pm #693291
    pspani63

    Hi Vinay,

    I am sorry, my explanation was not clear enough. I mean Consultancy in the dropdownmenu of Services. The hover color in the Services dropdownmenu is not oke yet; as you can see at the home page When someone hovers over Consultancy i want it totally to be the color #272727;
    Furthermore i would like to change the width of the dropdowmenu; i quess the right wide is about 120px;
    I now added the following code tot het Quick CSS section under Enfold > General Styling (but this code doesn’t give the result i like)

    #top #wrap_all .avia_mega_div {
    background-color: #272727;
    border-color: #272727;
    }

    #top #header .mega_menu_title a {
    margin-left: 0% !important;
    width: 70%;
    color: #FFFFFF;
    text-decoration: none;
    }

    ul .submenu {
    width: 120px !important;
    }

    ======================

    Best Regards
    Paul

    October 4, 2016 at 4:21 am #694841
    Ismael

    Hi,

    Furthermore i would like to change the width of the dropdowmenu;

    Please disable the mega menu option first because the markup is different from the default dropdown. And add this in the Quick CSS field to change the hover color:

    #top .header_color .main_menu .menu ul li>a:hover {
    color: #272727;
}

    Best regards,
    Ismael

    October 5, 2016 at 12:06 am #695275
    cekblad

    Hi. I would like for my mega menu to look/perform the same as my regular sub-menu items (background color, font color, font size, hover color, etc). Basically I want the look of my regular sub menu items for a mega menu on one of the dropdown headings (things to do). I’ve tried numerous ways with no luck. Please help.

    October 8, 2016 at 4:09 am #696783
    Vinay

    Hi,

    All the 3 submenus appear the same on the link provided in private. Let us know if you figured this one out or you need any further help with this issue.

    Best regards,
    Vinay

    October 8, 2016 at 10:19 am #696877
    pspani63

    Hi Vinay,

    This week i (finally!) figured out how to change the background color and hover color of the dropdownmenu. I disabled the mega menu, just like Ismael suggested. So thanks to Ismael for his suggestion. But, as i ask before, i also would like to know how to change the width of the dropdownmenu. I looked at ” advanced styling’ but it not possible to change here the width of the element “main menu sublevel links”. Have you got any suggestions for the custom css?!

    Best Regards
    Paul

    October 9, 2016 at 8:14 am #696996
    Rikard

    Hi Paul,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .av-main-nav ul {
width:300px !important;
}

    Regards,
    Rikard

    October 9, 2016 at 7:35 pm #697095
    pspani63

    Hi Rikard,

    It’s working now. You can close this thread now.

    Thanks!!

    Best Regards,
    Paul

    October 9, 2016 at 11:51 pm #697129
    Vinay

    Hi,

    Glad we could help! To know more about enfold features please check – http://kriesi.at/documentation/enfold/

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Mega menu submenu with and hover’ is closed to new replies.