Public Forums 71,145 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#157273

Is there a CSS fix – when utilizing a separator image in the main (horizontal) navigation menu – so that the separator does not appear after the last menu item ??

:confused:

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#366040

Can you explain in more detail, on what template and where?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#366050

On any template where you have the menu list items in the main nav menu (you know, the main nav that one can choose css, split, dropline, mega, etc.) . . . most times there are separator images in between the menu items (and usually to the right of each menu item). Well, when you get to the end, the last menu list item will still display the separator image after it because it’s pulling from the same CSS rule.

So, what I’m asking is – is there a CSS fix so that the separator image does not appear after the last (far right) menu list item?

EXAMPLE:
JA-Zeolite II – in/on the “JA MENU” (main horizontal navigation menu), the separators between Home, Typography, Layouts, etc. are images (mainnav-sep.gif) – and the image displays after “Shop” at the end of the menu. So, what I want to know is if one does not want the separator image to display after the last menu item (e.g. to the right of “Shop”), is there a CSS fix for that?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#366187

c’mon people . . . where’s the ingenuity ???

:p

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#366352

Anyone ??

Anyone ??

Bueller ??

Bueller ??

:((

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#366474

Sorry for my late reply!

The last menu item is added as a class, its name is “last-item”

You can use this class to remove its separator as following

#ja-cssmenu .last-item{
background:none!important
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#366567

Hi tienhc:

I am using the mega menu and I added the following code within the mega.css file . . .


/* Styling ---*/
#ja-mainnav ul.level0 {
margin: 0;
padding: 0;
}

#ja-mainnav ul.level0 li {
float: left;
display: block;
margin: 0;
background-image: url(../../images/mainnav-sep.png);
background-repeat: no-repeat;
background-position: right center;
padding-top: 0;
padding-right: 1px;
padding-bottom: 0;
padding-left: 3px;
}

#ja-mainnav ul.level0 li .last-item {
background:none!important
}


It does not seem to have changed anything – the separator image is still displaying after the last item.

Any thoughts?

:confused:

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#366568

oh, you have wrong code in here

#ja-mainnav ul.level0 li .last-item {
background:none!important
}
right:

#ja-mainnav ul.level0 .last-item {
background:none!important
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#366651

Thanks for keeping up the effort, tien !!

Here is exactly what I have now (after your recommended fix) . . .


#ja-mainnav ul.level0 {
margin: 0;
padding: 0;
}

#ja-mainnav ul.level0 li {
float: left;
display: block;
margin: 0;
background-image: url(../../images/mainnav-sep.png);
background-repeat: no-repeat;
background-position: right center;
padding-top: 0;
padding-right: 1px;
padding-bottom: 0;
padding-left: 3px;
}

#ja-mainnav ul.level0 .last-item {
background:none!important
}

It’s still not working – http://www.musicians-marketplace.com/zeo2

The “separator” image is still displaying after the last menu item (which is “Books & DVD”)

:((

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#366652

oh oh, sorry, you are using the mega menu =) , the last uses the “last” class, not “last-item”, pls see my snapshot

Thanks

1 user says Thank You to Saguaros for this useful post

1. TomC

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#366750

THAT DID THE TRICK – THANK YOU, tien !!!

😀

[Author]

Posts