Creating A Box Around Nav Link

Support
#1

Hi, is it possible to create a solid colored box around a link in my navigation menu like the image attached? My website is www.rhodestostrength.com. Thank you! website

I tried the CSS code below from another topic post for something similar and it didnt’ work,

li#menu-item-137 {
background-color: #a0d62f;
border-radius: 47px;
margin-top: 2px;
}

li#menu-item-137:hover {
background-color: #7b9a7d;
opacity: .7;
}

li#menu-item-137 span {
color: #fff;
}

li#menu-item-137 span:hover {
color: #151212;
}

Thanks!

Highlight menu
#2

Hello Candace,

Thanks for writing in!

Your code is almost correct. You just need to use the correct menu item ID.

To find the menu item ID, please right click on the page on your site and select “inspect element” and scroll down until you find code like this.

_ menu-item-ID-2
_ menu-item-ID-2717×150 81.1 KB

You can also go to Appearance > Menus and hover your mouse pointer over the Remove or Cancel link for each menu item.

_ menu-item-ID-1
_ menu-item-ID-1718×273 12 KB

In your case, the menu item ID is 939. Therefore, your final code will be:

li#menu-item-939 a {
    background-color: #a0d62f;
    border-radius: 47px;
    margin-top: 2px;
}

li#menu-item-939 a:hover {
    box-shadow: none;
    background-color: #7b9a7d;
    opacity: .7;
}

li#menu-item-939 span {
    color: #fff;
}

li#menu-item-939 span:hover {
    color: #151212;
}

Hope this helps. Please let us know how it goes.

#3

It worked! And how do I center the words to bring it up a tad higher in the color box? See image. Thank you! website spacing

#4

Hi Candace,

You have this custom CSS,

.x-navbar .desktop .x-nav > li > a {
    height: px;
    padding-top: 10px;
}

Please make sure to add bottom padding equal to the top padding for it to center. Or, set a height value instead of 0 until it centered.

Thanks!

#5

It worked! Thank you so much!

#6

You’re welcome Candace!
We’re glad we were able to help you out.

#7

Hello, I changed my menu item to a custom link instead and now the box has changed. See pic. The changes in the final code below doesn’t work anymore. How do I modify the code to get the same result as before? nav link

li#menu-item-939 a {
background-color: #f20095;
border-radius: 1px;
margin-top: 10px;
}

li#menu-item-939 a:hover {
box-shadow: none;
background-color: #000000;
opacity: .7;
}

li#menu-item-939 span {
color: #ffff;
}

li#menu-item-939 span:hover {
color: ##151212;
}
.x-navbar .desktop .x-nav > li > a {
height: px;
padding-top: 14px;
}
.x-navbar .desktop .x-nav > li > a {
height: px;
padding-bottom: px;
}

#8

Hi Candace,

I suggest that you follow the steps below to have a better way of handling the problem without the need to check the menu ID each time you change the menu.

  • Go to Appearance > Menus and select the menu in question.
  • From the top right section of the screen click the Screen Options.
  • Check the CSS Classes checkbox.
  • Go to the menu item in question and you will see the CSS Class option.
  • Add menu-button as the value of the CSS Class option.
  • Save the menu.
  • Go to the CSS code that you already have and change all instances of #menu-item-939 with .menu-button (Don’t forget to add the dot (.) before menu-button in the code)
  • From now one whatever menu item CSS Class that you set as menu-button will look like the button.

Screen Shot 2020-06-09 at 13.41.44
Screen Shot 2020-06-09 at 13.41.441579×232 22.8 KB

Screen Shot 2020-06-09 at 13.42.29
Screen Shot 2020-06-09 at 13.42.29747×319 13.6 KB

Thank you.

#9

You’re awesome @christopher! Thanks for solving this!

#10

We are delighted to assist you with this.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.