Multiple Image Separators in Nav Bar

[aftabn10]

Hi, i was looking for some help in regards to adding menu separators to my navigation bar. Currently my navigation bar is split into 2 css classes, menu and customer. The menu section has a menu separator in orange and the customer one has a menu separator in dark grey.

[MOD EDIT – Codedump removed]

The problem I am having is that when I use the ul#navmenu li.Menu:last-child { nothing shows up, but when I use the ul#navmenu li.Customer:first-child { than this shows up but the problem with this is that the rest of Customer menu does not show up properly.

Ideally would be easier if i could attach an image to show what I have, not sure if its possible.

What I would like is to have 1 image for the orange separator for the menu class and use a separate one for the first and last child and do the same for the Customer class where i would only require the in between separator and last child.

If somebody could please advise, would really appreciate it. Hoping that makes sense.

[__]

Please,

do not “dump” code.

This makes the discussion difficult to navigate and discourages people from trying to help.

Show us the specific code you are having a problem with, or make a reduced test case (e.g., using codepen).

[aftabn10]

Hi, apologies for that.

I have used codepen and reduced it to the 1 menu class.

i have used codepen to show my html and css code in the following:

http://codepen.io/anon/pen/oFcqg

So from the display you will see 4 buttons and in between the first 3 buttons (homepage, whats new?, specials) I manage to display an image separator on the right hand side of the button. The homepage button (first link) also has an image separator showing via the css code ul#navmenu li.Menu:first-child

The problem I have is when I activate the css code for ul#navmenu li.Menu:last-child this correctly adds an image separator on the right hand side of the contact us button but removes the image separator from the left side of the contact us button.

How is it possible for me to have an image separator on both sides of the homepage (currently have this working), both sides of the contact us button and an image separator on the right hand side of whats new and specials buttons.

[aftabn10]

GSutherland, thank you for your response. Apologies as my post wasnt clear enough, unfortunately I didnt know how to add my images into codepen hence made it more confusing. Thanks for the code will try that out and see how i get on.

[Paulie_D]

On re-reading the original post it looks like this menu has multiple list items with a choice of classes.

Currently my navigation bar is split into 2 css classes, menu and customer. The “menu” section has a menu separator in orange and the “customer” one has a menu separator in dark grey.

What the OP seems to be after is, if I understand correctly, a “nth-of-class” selector which, as we know, does not exist.

Frankly, it seems more logical to me to use two menus next to each other each with their own class and styling.

From the visitor’s perspective they could easily appear to be one menu so that’s not really an issue.

[aftabn10]

Thanks for your response PaulieD. The problem being is that I am trying to have a menu that will have some links with the orange background and some in the dark grey. Unfortunately I am using a module for a navigation bar and the only way to use the two different colors is by defining a separate class which I have done so.

The problem I am having is that even when i have tried this on the 1 menu (orange) if I activate the last child selector then this gives me the desired image separator on the right hand side of the last menu item but then the image separator (ul#navmenu li.Menu) doesn’t show.

I removed the no-repeat from the last-child selector which then shows up the image separator but not the correct image.

Hope that makes sense.

[Paulie_D]

You see

ul#navmenu li.Menu:last-child

Won’t work unless the list item has a class of .menu.

:last-child only works on the element that IS a list child.

Perhaps you could update your Codepen with the full HTML / CSS of the actual menu.

If you don’t have the images it’s not a big deal…we can deal with that later once we have a better idea of how this all comes together.

If you want to put the images into Codepen they have to be web-hosted. I use Photobucket.com which allows me to upload images and get links I can use in demos like this. Just an option, there are many others.)

[aftabn10]

Thanks Paulie_D, i have managed to rewrite the code into codepen with the images on photobucket.

The link is:

http://codepen.io/anon/pen/evlut

[Paulie_D]

Closest I can get.

http://codepen.io/Paulie-D/pen/kfaeK

I had to use multiple background images on the first Customer menu item and add a class.

You seem to be missing a ‘black to black’ image though.

Frankly, pseudo-elements would be much easier.

[aftabn10]

Thanks Paulie_D, apologies the black to black can be found at the following link:
Black to Black

Thanks for your time.

Btw, is there an example of pseudo-elements with 2 menus that could help me fix this?

[Author]

Posts