Can't get rid of rollover object (CSS & iTheme2)
-
So, I’ve spend the day wading through the mire of CSS and got the site looking almost exactly how I want it…almost.
With the iTheme2 theme there is a home button (which you can see here on the left edge of the menu bar http://theme.wordpress.com/themes/itheme2/)/
Well, I killed that pretty sharpish with this handy bit of CSS:#navHome {
display: none;
}Which, more or less, works. However, there is a left over shadow image and rollover shading which has attached itself to the first child item it found, that is a home link, in my menu and won’t go away.
If you look at my site it’s the “Latest Music & News” item, the first child item in the “WebZine” menu, you’ll see it’s got the original home buttons shading and if you push your cursor to the edge of the entry you can get it to mouseover shade.
I’ve spent a good few house trying to get rid of it, to no avail.I found the HTML for it:
<li id=”menu-item-19037″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-19037″>Latest Music & News
That “<li id=”menu-item-19037″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-19037″>”, if you remove from the HTML all is fine, but obviously I need to find a way to do that using CSS…and I have no idea.Help! Driving me insane!
The blog I need help with is: (visible only to logged in users)
-
Here is my suggestion: Delete the #navHome rule you’ve put into the CSS and create a custom menu and then don’t include a home entry in that menu. Custom menus offer a lot of flexibility and features that you may find useful in the future. If you leave out the home link, then the menu items will slide over to the left end and all the stuff associated with the home button will disappear. You can see the result of the above on my test blog: http://flippintestblog.wordpress.com .
-
Deleted the rule, no change at all LOL
It’s already a custom menu, I’m gonna try rebuilding it from scratch. -
You know the only rollover effect I see on your site is the standard one for a menu item with a drop down. What exactly are you seeing?
-
Right, completely deleted and rebuilt the custom menu, it’s still there! ROFL
This is what I’m talking about:
-
You know, there is something wrong. Look at my test blog. I’ve added drop downs to the second menu item and don’t get that issue either when I do the first or second menu items.
-
There is! :D
And I’m racking my brain as to what it is.
I have nothing in my CSS relating to the menu bar, not even the home button removal anymore.
If you play with the site in a browser and get rid of this line of HTML:
<li id=”menu-item-19037″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-19037″>
It goes.
I need to find some way to do the same with CSS.In case you could fine something weird of conflicting, this is the entirety of my CSS adjustments:
#masthead {
display: block;
width: 978px;
background: url(‘http://electronicrumors.files.wordpress.com/2013/03/wordpressbanner2013x1.png’) top right no-repeat;
padding-top: 100px;
}.post-date .month {
border: solid 1px #b0aeae;
background: #b0aeae;
background: -webkit-gradient(linear,left top,left bottom,from(#b0aeae),to(#b0aeae));
background: -moz-linear-gradient(top,#b0aeae,#b0aeae);
background: linear-gradient(-90deg,#b0aeae,#b0aeae);
}.post-date a {
text-decoration: none;
}.hentry {
border-bottom-color: black;
border-bottom-style: dashed;
border-bottom-width: 1px;
margin-bottom: 45px;
position: relative;
}.entry-meta {
clear: both;
color: #595959;
font-size: 1.1rem;
line-height: 1.2;
padding-bottom: 23px;
}#access div.menu > ul > li:first-child > a, #access li.menu-item-home a {
background: none;
width: 180px;
text-indent: 0;
}See anything off?
-
Temporarily remove the last bit and save and see what happens. That is the only menu related stuff you have in there.
#access div.menu > ul > li:first-child > a, #access li.menu-item-home a { background: none; width: 180px; text-indent: 0; } -
I took the line out, then remembered why I had put it in, this is actually better than it was, it used to show the whole Home icon in the child object, and does again if you take the CSS out:
-
Haha, OK, I found a very shoddy workaround.
I’ve tried everything I can think of, CSS wise (not that I know CSS well), I went through the entire theme and experimented with every reference to it I could find, nothing worked.
So here are the facts:
1) I want a Home link in my menu, but a text one, I don’t want to loose the link.
2) Whenever I put a home link in my menu, it tries to apply what’s left of the Home icon (shadowing and rollover shade) to it, no matter where it is in the menu hierarchy.My makeshift solution is to have a home link in my menu, but it’s running through a URL shortening service, so whatever keeps trying to attach the icon doesn’t know it’s a home link, but it (more or less) behaves the same way.
Pretty sneaky, huh?I would still like to know whats gone wrong here, if anyone has the CSS chops or iTheme2 skills?
My workaround is fine for now, but I would like to get it working properly…someday… -
I’m at a loss as to how to fix this via CSS. I’ve played with it for a while now and don’t see how to override the icon and get the text to display instead without your trickery with the shortener. It is obviously triggering off of the URL. I tried putting the home menu item on the right end too, and it puts the home icon there instead of text.
I think you’ve found the only workaround.
-
2) Whenever I put a home link in my menu, it tries to apply what’s left of the Home icon (shadowing and rollover shade) to it, no matter where it is in the menu hierarchy.
I would still like to know whats gone wrong here, if anyone has the CSS chops or iTheme2 skills?
I can see the problem clearly in your screenshots (thanks for including those, they’re always helpful), but I’m a little lost as to how to reproduce the problem. If you’d really like to dig into it, would you be willing to remove your workaround temporarily so I can take a closer look?
- The topic ‘Can't get rid of rollover object (CSS & iTheme2)’ is closed to new replies.
WordPress.com Forums 