-
AuthorPosts
-
TomC Moderator
TomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
December 9, 2010 at 9:19 pm #157273Is 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 ModeratorPhill
- Join date:
- February 2014
- Posts:
- 7013
- Downloads:
- 40
- Uploads:
- 77
- Thanks:
- 917
- Thanked:
- 2206 times in 1818 posts
December 9, 2010 at 10:03 pm #366040Can you explain in more detail, on what template and where?
TomC ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
December 9, 2010 at 11:14 pm #366050On 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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
December 10, 2010 at 4:29 pm #366187c’mon people . . . where’s the ingenuity ???
:p
TomC ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
December 11, 2010 at 9:03 pm #366352Anyone ??
Anyone ??
Bueller ??
Bueller ??
:((
Saguaros ModeratorSaguaros
- Join date:
- September 2014
- Posts:
- 31405
- Downloads:
- 237
- Uploads:
- 471
- Thanks:
- 845
- Thanked:
- 5346 times in 4964 posts
December 13, 2010 at 3:04 am #366474Sorry 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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
December 13, 2010 at 4:55 pm #366567Hi 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 ModeratorSaguaros
- Join date:
- September 2014
- Posts:
- 31405
- Downloads:
- 237
- Uploads:
- 471
- Thanks:
- 845
- Thanked:
- 5346 times in 4964 posts
December 13, 2010 at 4:58 pm #366568oh, 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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
December 14, 2010 at 4:45 am #366651Thanks 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/zeo2The “separator” image is still displaying after the last menu item (which is “Books & DVD”)
:((
Saguaros ModeratorSaguaros
- Join date:
- September 2014
- Posts:
- 31405
- Downloads:
- 237
- Uploads:
- 471
- Thanks:
- 845
- Thanked:
- 5346 times in 4964 posts
-
AuthorPosts
This topic contains 11 replies, has 3 voices, and was last updated by TomC 13 years, 10 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum