Okay
  Public Ticket #2687379
Chance menu font colour on 1 specific page
Closed

Comments

  • riponad2 started the conversation
    February 10, 2021 at 12:26pm

    hello


    I need to change the menu colour to black on 1 specific page (contact page)


    Any CSS script that can help achieve that?


    Thanks


  •  2,963
    Andrew replied
    February 10, 2021 at 5:49pm

    Hi there,

    Use the following custom css:

    body.page-id-5288 #header-outer[data-transparent-header="true"].transparent nav >ul >li >a {
    color: black;
}

    Kind regards.

  • riponad2 replied
    February 11, 2021 at 8:54am

    Hi Andrew


    Sharing a screenshot of the inline CSS

    I tried.

    .body.page-id-5288 #header-outer[data-transparent-header="true"].transparent nav >ul >li >a {
    color: black;
}

    But didn't change the text colour, maybe it conflicting with another CSS setting?

    Otherwise i can give you access to the page

    Thanks

  •  2,963
    Andrew replied
    February 11, 2021 at 11:53am

    Hi there,

    There seems to be a dot at the beginning of body in css you shared.

    Try the following:

    body.page-id-5288 #header-outer nav >ul >li >a {
    color: black !important;
}

    Here is how it looks

    2870398734.png


    Kind regards.

  • riponad2 replied
    February 11, 2021 at 7:34pm

    Hi Andrew, thank you

    I should have mentioned, its actually the other 'main menu' where I need the font text black - apologies. 

    While your CSS does indeed work for the secondary menu. But hat will come in useful in the future anyways.

    body.page-id-5288 #header-outer nav >ul >li >a {
    color: black !important;
}

    Do you know if there is a CSS workaround for changing the font colour in the main navigation menu in a specific page?

    Thanks again

    Adam

  •  2,963
    Andrew replied
    February 12, 2021 at 11:51am

    Hi Adam,

    The following css will change the color to white on main navigation menu. The page ID 5288 will apply to this specific page only https://www.surfstr.com/contact/

    body.page-id-5288 #header-outer.transparent.dark-slide > #top nav > ul > li > a {
    color: black !important;
}

    Hope this helps.

  • riponad2 replied
    February 17, 2021 at 10:35pm

    Many thanks Andrew - worked like a charm :)