Border around one link in the navigation bar

[rodolfogrimaldi]

I want to create a border on my contact link in my main navigation top bar.

I have used this CSS snippet:

.genesis-nav-menu > .last > a {
    border: 2px solid #4f4f4f;
    padding: 5px !important;
}

but it doesn't seem to work. I also have used something more specific, like:

.menu-item-211 {
border: 2px solid #4f4f4f;
padding: 5px !important;
} 

but the result is the same. Can you tell me where am I wrong? Or maybe something is missing?
The child theme is Parallax Pro, but I don't think it matters that much.

Thank you very much 🙂

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

http://offer.rodolfogrimaldi.com

[Brad Dalton]

This works

.menu-item-211 {
    border: 2px solid #4f4f4f;
    padding: 5px;
} 

Add the CSS at the end of the style.css file and clear any server/plugin/browser caching.

---

Tutorials for StudioPress Themes & WooCommerce.

[rodolfogrimaldi]

Thank you very much, Brad, for your quick answer 🙂
Unfortunately it doesn't work. I've checked it again right now, on three browsers, cleaned the caches several times, and it still looks the same. There must be something more to it...

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

[Christoph]

It looks like it is working as expected:
http://screencast.com/t/1rBybVSEI

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[rodolfogrimaldi]

You are right, I see it too, now, thank you, Cristoph 🙂

I actually wanted to do something like this: https://www.diigo.com/item/image/5cmtl/muqj

This is 5px padding, or at least, so I like them to be. What I have now, with that piece of code, is 20 pixels right and left, and 27 pixels up and down. Can I customize it more than that, please? Or better, what should I do to make the border look like the one from the link above?

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

[rodolfogrimaldi]

Sorry, I have deleted the image by mistake, and the editing time for my reply expired.

Here is an image of how I wish the border to look: http://www.diigo.com/item/image/5cmtl/3ed0

Thank you, if you have a solution for that 🙂 I shall be more than grateful 🙂

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

[Victor Font]

Try useing

.menu-item-211 a {
    border: 2px solid #4f4f4f;
    padding: 5px;
} 

This should put the border on the link instead of the list item.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[rodolfogrimaldi]

Thank you very much, Victor, this must do the trick, it's logic. Now I have to wait for it to show.

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

[rodolfogrimaldi]

Perfect! Thank you again. It was actually what I did before approaching the forum, but I haven't had the patience for it to appear "live", I thought that something is wrong, or the theme doesn't allow it without other modification somewhere else, in functions.php or even in the style sheet.
It looks exactly how I wanted 🙂

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

[rodolfogrimaldi]

Thank you very much braddalton, Cristoph, and especially Victor Font for your involvement and your kindness to help me.
The last piece of code, the one provided by Victor, was actually the first I have used to add the border, before posting here on the forum. I haven't had the patience to wait for it to appear on my browser, and I thought it didn't work, that the theme doesn't allow it without another alteration somewhere. I haven't been clear enough from the beginning, to post a screenshot for what I expect, my mistake.
Question is solved 🙂

---

Daniel Mihai Popescu
Rodolfo Grimaldi Blog

[Author]

Posts