Community Forums › Forums › Archived Forums › Design Tips and Tricks › add dots or small png between each menu item in nav bar
Tagged: nav bar customization
- This topic has 5 replies, 2 voices, and was last updated 9 years, 11 months ago by Chrys.
-
AuthorPosts
-
May 1, 2014 at 10:13 am #103194ChrysMember
Hi,
It's all in the title.
I cannot figure out how to add a small dot or a little star or whatever between each menu item in my nav bar... Where should I look for?
I've seen a girl on a website I explored with firebug using the css property content:"?—?" but I don't where to use it, if it's good method and how to give it a color...Anyone as already done that?
Kind regards,
Chrys
May 1, 2014 at 11:26 am #103200Lauren @ OnceCoupledMemberYou'll want to use a pseudo selector, either
:before
or:after
. You can then style it using the same CSS properties as usual, likecolor: #DDD;
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 1, 2014 at 11:37 am #103203ChrysMemberHi,
Can you tell me more? I am a beginner and learning css by myself.. Where do I place this selector? And in which part of genesis css? Primary nav bar for example?
I'm a bit lost and couldn't find an answer on google 🙁Thanks for your help!
Best regards
May 1, 2014 at 12:32 pm #103205Lauren @ OnceCoupledMemberI don't really have time to test it right now (sorry!) but yeah, apply it to whichever menu you want. So it will depend a little on how your CSS is already set up. But something like
.menu li:after { content: "?—?"; (you may want to use the HTML code) color: #DDD; padding: 5px 25px; padding: .5rem 2.5rem; }
Anyway, let me know if you can't figure it out still - I'm writing this on the spot and that's not really the type of brain I have. :p
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 1, 2014 at 12:38 pm #103206ChrysMemberHi!
Thanks for that. I'll try it.
No worries, that's already great that you take time to help me with that and as I told you I'm in a learning process so I will try this and play around. I'll try tomorrow (it's the evening where I live) .Do you know a good site or good book that can help me with styling things like that in css on genesis or more general?
I understand css rules but to apply them I read some themes in order to understand how things work but maybe there's another way to learn better...?Thanks a lot!
Chrys
May 3, 2014 at 10:53 am #103472ChrysMemberHi Lauren,
Finally I have used a background-image (useful if I want to include my own images) and I have played a bit around and added this code to lifestyle pro.
.genesis-nav-menu a {
background-image: url(images/blackdot.png);
background-position: 0 50%;
background-repeat: no-repeat no-repeat;
border: none;
color: #fff;
display: block;
padding: 20px 24px;
position: relative;
}
It's almost perfect. The only problem I've got is ideally I wouldn't want one dot before the first word in my navigation but I don't know if it's possible to do so... I've seen it on blogs but even if look at the code I don't know how they do to inclue little images or dots between each elements but not in front of the first one...
If anyone has an idea you're welcome 😉 anyway, I'll keep searching.Kind regards
Chrys
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.