Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 23, 2020 at 12:06 pm #1177567
    studiono

    I am trying to achieve something like the screenshot I am posting but it seems like I can’t do that. I need to lower the menu (and I found something about that here in the support forum) but I also need to put a line on the bottom side of the menu so, lowering them with

    #top #header_main > .container .main_menu ul:first-child > li > a {
    line-height: 155px;
}

    it looks the box is too down and the border will be outside of the header area, am I right?

    I also need to put a different color for each item – I think I know how to do that (with different IDs) but I think it’s important to tell you

    THANKS!

    January 23, 2020 at 9:00 pm #1177865
    Victoria

    Hey studiono,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #header_main > .container .main_menu ul:first-child > li > a {
    line-height: 155px !important;
}
#top .header-scrolled #header_main > .container .main_menu ul:first-child > li > a {
    line-height: 60px !important;
}
#menu-item-24 a {
    border-bottom: 4px red solid;
}
#menu-item-10 a {
    border-bottom: 4px yellow solid;
}
#menu-item-11 a {
    border-bottom: 4px green solid;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 25, 2020 at 3:48 pm #1178373
    studiono

    it works! thanks! But now I need to change the background color of the sub menus (it needs to be the same of the border color on the botton on the menu) – can you please help me with that? In sending you two examples (for differente menu and color) THANKS!

    January 26, 2020 at 8:52 am #1178462
    Rikard

    Hi,

    Please try this CSS as well:

    #menu-item-10 .sub-menu li a {
  background: #2D509F;
}

#menu-item-11 .sub-menu li a {
  background: #F4E600;
}

    Best regards,
    Rikard

    January 26, 2020 at 9:25 am #1178471
    studiono

    thanks it is working but it leaves a white space (1 px I think) on the sides of the sub menu – how can I fix that? You can check my website and you will see that.

    thanks a lot!

    January 27, 2020 at 6:17 am #1178572
    Rikard

    Hi,

    Please try this instead:

    #menu-item-10 .sub-menu li a {
  background: #2D509F;
  border: none !important;
}

#menu-item-11 .sub-menu li a {
  background: #F4E600;
  border: none !important;
}

    Best regards,
    Rikard

    January 27, 2020 at 10:52 am #1178632
    studiono

    Thanks, I changed that a bit to meet my needs. It is possible to change the width of the sub-menu to meet the lenght of the text? I have seen code around here to change the width to ALL the sub-menus but I would love to have the submenus to adapt to the text they have. Hope I am clear ;)

    January 27, 2020 at 10:54 am #1178634
    studiono

    another thing – if you visit my website you will see that the sub-menu are changin color on hover but not in all of them, just in some… why? I would like them to always stay the same color (if it’s black – black on hover too) thanks!

    January 28, 2020 at 5:26 pm #1179087
    studiono

    help!

    January 28, 2020 at 5:36 pm #1179093
    Yigit

    Hi,

    Please add following code to Quick CSS in Enfold theme options > General Styling 

    #top .header_color .main_menu .menu #menu-item-11 ul li>a:hover,
#top .header_color .main_menu .menu #menu-item-14 ul li>a:hover {
    color: #000000;
}
#top .header_color .main_menu .menu #menu-item-10 ul li>a:hover,
#top .header_color .main_menu .menu #menu-item-24 ul li>a:hover,
#top .header_color .main_menu .menu #menu-item-12 ul li>a:hover,
#top .header_color .main_menu .menu #menu-item-13 ul li>a:hover,
#top .header_color .main_menu .menu #menu-item-15 ul li>a:hover {
    color: white;
}

    Regards,
    Yigit

    January 28, 2020 at 5:48 pm #1179102
    studiono

    thanks, that works for the font color, but I also need the submenus box to adapt to the text they have (it’s a request I made earlier in this same thread) can you plase help with that?

    thanks!

    January 28, 2020 at 5:58 pm #1179109
    Yigit

    Hi,

    I personally think that is not a good idea and you will have another issue such as the one i attached in private content field but if that is what you would like to do, please add following code to Quick CSS as well

    .av-main-nav #menu-item-24 ul {
    width: 105px;
}
.av-main-nav #menu-item-10 ul {
    width: 47px;
}
.av-main-nav #menu-item-11 ul {
    width: 74px;
}
.av-main-nav #menu-item-12 ul {
    width: 143px;
}
.av-main-nav #menu-item-13 ul {
    width: 67px;
}
.av-main-nav #menu-item-14 ul {
    width: 72px;
}
.av-main-nav #menu-item-15 ul {
    width: 91px;
}

    Best regards,
    Yigit

    January 28, 2020 at 6:07 pm #1179115
    studiono

    Of course you are right, but I don’t need the sub-menu to be the length of the menu text (the first button), I need them to be the length of the sub-menu texts. I hope I explained that right :)

    January 28, 2020 at 7:04 pm #1179134
    Yigit

    Hi,

    You can edit the code above and adjust width as needed. First code is for first menu item and so on :)

    Best regards,
    Yigit

    January 28, 2020 at 7:07 pm #1179140
    studiono

    yes, of course but it s possible to have it automatically changing following the width of the text?

    • This reply was modified 4 years, 10 months ago by studiono.
    January 29, 2020 at 8:19 pm #1179546
    Victoria

    Hi studiono,

    Auto width height will not really work in this case, so it has to be explicitly set.

    Best regards,
    Victoria

    January 29, 2020 at 8:20 pm #1179548
    studiono

    ok I see – that is not a big issue, I can live with that :)

    thanks for the help!

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Put a differente border color on each top menu item’ is closed to new replies.