Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 9, 2017 at 10:26 am #744726
    gorehalling

    Hi guys!
    Thanks for a great theme and awesome support!

    I’ve been wrestling with a problem.
    I’ve added custom CSS to change the main menu font color on a specific page, changing the color from white to #6b8bc8:

    .page-id-826 .av_header_transparency #header_main .avia-menu-text, .page-id-142 .av_header_transparency #header_meta * {
    color: #6b8bc8!important;
}

    But this code also changes the sub menu font to #6b8bc8, but I would like the submenu font to remain white.
    I’ve searched the forums and found several codes that change the sub menu font color, but non of them work alongside the above mentioned piece of code.
    Any help would be appreciated :)

    BR, gorehalling

    February 10, 2017 at 7:52 am #745234
    Rikard

    Hey gorehalling,

    Please try this instead:

    .page-id-826 .av-main-nav > li > a .avia-menu-text {
  color:white !important;
}

    Best regards,
    Rikard

    February 10, 2017 at 8:06 am #745236
    gorehalling

    Hej Rikard,

    thanks for the reply, but unfortunately that bit of code didn’t work.
    I’ve found similar codes like the one you wrote on the forum, and all of them work just fine as they are but not together with the code that I wrote in my first post which changes the main menu link color.

    Looks like I need a gathered pice of code that adressess both the main menu link color AND the sub menu link color on a specific page!

    BR, gorehalling

    February 12, 2017 at 6:55 am #745855
    Rikard

    Hi,

    I’m not sure what’s going on there, I’m pretty sure the code I gave you should work. Could you try to remove your custom CSS and add only the one I gave you please?

    Best regards,
    Rikard

    February 13, 2017 at 9:54 am #746263
    gorehalling

    Hi,

    When adding the code, nothing happens. When adding the code and removing the old code, the whole menu(main+sub) turns white.
    So in no instance do I get the desired result: Main menu in #6b8bc8 and submenu links in White.

    I’ll supply you with admin login so you may have a closer look.

    Thanks for all your help so far!

    BR, gorehalling

    February 14, 2017 at 5:18 am #746709
    Rikard

    Hi,

    Thanks for that. Just to be clear, you want the top level menu items in blue and the sub link in white, right? If so then please try removing the !important statement from your code and add this as well:

    .page-id-826 .sub-menu .avia-menu-text {
  color:white;
}

    Best regards,
    Rikard

    February 14, 2017 at 9:01 am #746756
    gorehalling

    Hi again Rikard,

    I can’t seem to get this one to work!
    I’ve followed your steps:

    Removing the !important statement from `.page-id-826 .av_header_transparency #header_main .avia-menu-text, .page-id-142 .av_header_transparency #header_meta * {
    color: #6b8bc8!important;
    }`

    just made the MAIN MENU white.
    And there was no difference when adding that last bit of code either.

    So the result ended up with the MAIN MENU being white(instead of blue) and the SUB MENU being blue(instead of white)
    I’ll keep your login credentials – so please feel free to log in to my site and see if there is something fishy I’ve done with the code :)

    Thanks for your time and effort, much appreciated!

    BR, gorehalling

    February 14, 2017 at 10:04 am #746780
    Vinay

    Hi,

    I tried to troubleshoot this issue but the login credentials you provided do not work for me. You can easily edit this from Dashboard > Enfold > Advanced Styling > Select menu item from the dropdown list. (NOTE: This will work perfectly fine if there is no code added to modify the menu items).

    If for some reason you have trouble with it please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    /* Submenu color*/
.av-main-nav ul li a {
	color: #000 !important;
}
/* Submenu color on hover*/
.av-main-nav ul li a:hover {
	color: #000 !important;
}

    Best regards,
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    February 14, 2017 at 10:29 am #746789
    gorehalling

    Hi Vinay,
    thanks for taking time to look into this.

    Since the desired effect

      (blue main menu links and white sub menu links)

    isn’t going to apply to all my pages, then I thought I had to go the Quick CSS-way and not via the Advanced Styling.

    The code you supplied worked on all pages except the one I want targeted!

    I’ll supply you with a new login, hope it works.

    BR, gorehalling

    February 17, 2017 at 10:35 pm #748673
    Yigit

    Hi,

    I changed your code to following one

    .page-id-826 .av_header_transparency #header_main .av-main-nav > li > a > .avia-menu-text, .page-id-142 .av_header_transparency #header_meta * {
    color: #6b8bc8!important;
}

    Please review your website now :)

    Best regards,
    Yigit

    February 18, 2017 at 12:21 am #748723
    gorehalling

    Yigit, awesome!!! Now it works like a charm.

    Thank you so much for your time and effort!!!

    BR, gorehalling

    February 20, 2017 at 6:19 am #749145
    Rikard

    Hi,

    Great, glad we could help. Yigit is a genius :D

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 20, 2017 at 9:54 am #749243
    gorehalling

    Thanks to all of you guys in the Kriesi Team for your time and effort in this matter!
    Let’s close this one :)

    February 20, 2017 at 4:15 pm #749436
    Nikko

    Hi,

    Thanks for your kind words and thanks for using Enfold. Have a wonderful day :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Separate colors on main menu and sub menu items’ is closed to new replies.