Community Forums › Forums › Archived Forums › Design Tips and Tricks › Border around one link in the navigation bar
- This topic has 9 replies, 4 voices, and was last updated 9 years, 6 months ago by
rodolfogrimaldi.
-
AuthorPosts
-
August 11, 2015 at 12:07 pm #162050
rodolfogrimaldi
MemberI 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 BlogAugust 11, 2015 at 12:18 pm #162054Brad Dalton
ParticipantThis 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.
August 11, 2015 at 1:03 pm #162060rodolfogrimaldi
MemberThank 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 BlogAugust 11, 2015 at 2:07 pm #162071Christoph
MemberIt looks like it is working as expected:
http://screencast.com/t/1rBybVSEI
August 11, 2015 at 4:44 pm #162086rodolfogrimaldi
MemberYou 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 BlogAugust 11, 2015 at 5:03 pm #162092rodolfogrimaldi
MemberSorry, 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 BlogAugust 13, 2015 at 1:22 am #162225Victor Font
ModeratorTry 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?August 13, 2015 at 1:48 am #162228rodolfogrimaldi
MemberThank 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 BlogAugust 13, 2015 at 6:53 am #162242rodolfogrimaldi
MemberPerfect! 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 BlogAugust 13, 2015 at 10:09 am #162241rodolfogrimaldi
MemberThank 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.