Home Forums Weaver Xtreme Theme menu links

This topic contains 8 replies, has 2 voices, and was last updated by  merlojh 9 months, 4 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #58444

    merlojh
    Participant

    Is there a way to put a background color on just one of the menu item links say if I wanted it background color behind Murals? John

    #58445

    merlojh
    Participant

    Sorry on this website http://www.singingtreeproject.org/

    #58448

    scrambler
    Moderator

    You can do one of two things.

    Go in Appearance > Menus, open the menu item, and give it a class like mymurals, then add a CSS rule to do the job

    .mymural {background-color:grey;}

    Or you can inspect your menu item with your browser developer tool, note the ID (here menu-item-191) and use that for the CSS rule

    #menu-item-191 {background-color:grey;}

    #58456

    merlojh
    Participant

    Thanks that worked John!

    #58458

    merlojh
    Participant

    How would you do a hover color?

    #58460

    scrambler
    Moderator

    Add a hover rule 🙂

    #menu-item-191 {background-color:grey;}

    #menu-item-191:hover {background-color:blue;}

    You may need !important

    #58462

    merlojh
    Participant

    Tried both not working?

    #menu-item-1156 {background-color:#306D9C; border-radius: 15px; } this works

    #menu-item-1156:hover { background-color: red; border-radius: 15px; } does not work

    #menu-item-1156:hover { background-color: red !important; border-radius: 15px; } does not work

    #58463

    scrambler
    Moderator

    The existing hover background appears to be on the link, so add the a tag selector to the rule

    #menu-item-1156 a:hover { background-color: red !important; border-radius: 15px; }

    #58464

    merlojh
    Participant

    Thanks! John

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.