add dots or small png between each menu item in nav bar

[Chrys]

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

[Lauren @ OnceCoupled]

You'll want to use a pseudo selector, either :before or :after. You can then style it using the same CSS properties as usual, like color: #DDD;

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Chrys]

Hi,

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

[Lauren @ OnceCoupled]

I 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

[Chrys]

Hi!

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

[Chrys]

Hi 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

[Author]

Posts