Menu button that has a color background and border color

Support
#1

Hi, I’m using the X-Theme and want to know how to change a menu button so that it stands out. I’d like to give it a color background, border, and a hover color. Can you instruct me how to do this?
Thanks in advance for your assistance
Marcy
MarcyTravis.com

#2

Sorry, I meant to include this: it is menu item 13627

#3

Hi,

To achieve that you can add the code below in Theme Options > CSS

.x-navbar .desktop .x-nav>li.menu-item-13627>a>span {
    background-color: red;
    color: #fff;
    border:1px solid red;
}

.x-navbar .desktop .x-nav>li.menu-item-13627>a:hover>span {
    background-color: yellow;
    color: #000;
    border:1px solid #000;
}

Change the colors as you like.

Hope that helps.

#4

@paul.r
Thanks so much! :smiley:

#5

@paul.r One more thing, please! The menu button is rounded. How do I change the shape to be square? Thanks so much!

#6

Hello @MARCYTRAVIS,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS to make menu rounded:

.x-navbar .desktop .x-nav>li.menu-item-13627>a>span {
    border-radius: 0;
}

Thanks.

#7

@Prasant Thanks so much!:grinning:

1 Like
#8