Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 24, 2019 at 4:49 pm #1121619
    toddbarden

    Hi, I believe Ive seen this asked on here before but havent been able to find the thread.

    Im looking at a way to create custom coloured links for a couple of pages on the main nav – see attached. Is there some custom CSS that will change the nav coloured based on the page ID or similar?

    https://prnt.sc/ojgqyx

    many thanks
    Todd

    July 24, 2019 at 5:37 pm #1121647
    Jordan Shannon

    Hey toddbarden,

    You have to target both the page-id and link id with css to update the color. You can find them both via the browser inspector.

    Best regards,
    Jordan Shannon

    July 24, 2019 at 6:21 pm #1121681
    toddbarden

    Hey Jordan,

    Thanks loads for the advice, sorry thats a beyond me… can you give me an example? Login details also attached if that helps?

    1st page id – post=29
    2nd page id – post=31

    Thanks loads in advance

    Todd

    July 25, 2019 at 5:28 am #1121812
    Rikard

    Hi Todd,

    Here’s an example for your first menu item:

    #menu-item-41 .avia-menu-text {
  color:red;
}

    You can follow that structure for your other menu elements, simply right click on them and select inspect in your browser so find the menu-item id.

    Best regards,
    Rikard

    July 25, 2019 at 7:52 am #1121830
    toddbarden

    Thanks Rikard, this is brilliant.
    Is it then possible to add a rollover colour to these menu items?

    July 25, 2019 at 10:10 am #1121870
    Rikard

    Hi,

    Yes, that’s possible. Try this for instance:

    #menu-item-41 .avia-menu-text:hover {
  color:yellow;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.