Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 15, 2022 at 10:07 am #1344503
    Enfoldfanatic

    Hi,

    On a particular page I have set a transparent header and a pretty dark background image. Therefore I have set the following Quick CSS to make the menu text light colored on this page. However with this snippet of CSS the text color of the submenu (white background) also turns out light grey.

    .page-id-702 a .avia-menu-text{
    color:#d3d1d1!important;
    }

    Can you tell me how I can ensure that I only update the main menu (1st level) text color and not the submenu parts.

    Thanks and regards

    March 15, 2022 at 12:06 pm #1344543
    Rikard

    Hey Enfoldfanatic,

    Could you post a to the actual page, so that we can have a closer look please?

    Best regards,
    Rikard

    March 15, 2022 at 12:12 pm #1344547
    Enfoldfanatic

    Hi Rikard,

    Please find the URL in the private content, the 1st link (/menu) has a adapted menu text color through Quick CSS. But if you hover over the menu option “Vacatures” you see that also the child element items have the lighter font color.

    The child menu elements should have the regular set font color #444444

    March 15, 2022 at 4:24 pm #1344579
    Yigit

    Hey,

    Please change your code to following one 

    .page-id-702 #avia-menu > li > a .avia-menu-text {
  color: #d3d1d1 !important;
}

    Best regards,
    Yigit

    March 15, 2022 at 4:27 pm #1344581
    Enfoldfanatic

    Hi Yigit,

    Great, that did the job.

    Kind Regards

    March 15, 2022 at 4:37 pm #1344583
    Yigit

    Hi,

    Great! Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

    March 23, 2022 at 2:11 pm #1345675
    Enfoldfanatic

    Hi Yigit,

    Once more question on this topic. I have a shrinking header on this particular page (URL in private content) . How can I make sure that when the page header shrinks the menu color is set to #444444 again?

    I’m defining an alternative color for the menu text since I’m using a transparant background here. Hence this color is also applied when the header shrinks and then seems not readable very well. The CSS I applied of this page is:

    .page-id-702 #avia-menu > li > a .avia-menu-text {
    color: #d3d1d1 !important;
    }

    March 23, 2022 at 3:42 pm #1345702
    Yigit

    Hi,

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

    
.page-id-702 .header-scrolled #avia-menu > li > a .avia-menu-text {
  color: #444 !important;
}

    Regards,
    Yigit

    March 23, 2022 at 3:55 pm #1345703
    Enfoldfanatic

    Superb! Thanks guys.

    Feel free to mark the topic as solved.

    Kind regards

    March 23, 2022 at 6:46 pm #1345735
    Rikard

    Hi,

    Great, I’m glad that we could help, and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change color of submenu links on particular pages’ is closed to new replies.