ThemeShaper Forums » Thematic


Menu divider bar still visable on hover.

(3 posts)
  • Started 13 years ago by Evenrude
  • Latest reply from Evenrude
  • This topic is resolved
  1. I am working on a menu for friends website... and am still very new to designing.

    Anyhow, I figured out how to put a divider in between menu items using:

    .sf-menu a {
    background-image: url(images/menu_divider.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;

    But, he wants the far left divider bar to be gone. Using firebug I found the class for that menu item to be ".page-item-7 "

    I then did this:

    .page-item-7 a {
    background-image: none;

    I thought YAHTZEE! I got it.. till I hovered over it and saw the bar grow back.

    I have tried all kinds of :hover, :focus, CSS to no avail... It's probably something simple, but after a couple hours thought I would try here. Thank you in advance if anyone can help...

    The test site is here:

    Posted 13 years ago #
  2. Paulo

    If I understand it right;

    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background-image:url("images/menu_divider.jpg");/* remove this line of code and the divider will be gone */
    background-position:left bottom;

    And why using images when yo can use border property? More here

    Posted 13 years ago #
  3. Thank you for the reply.

    We want to keep the dividers in between all of the menu items, except for the far left one (gallery). If I omit that line all of them will disappear. The gallery link has a class of ".page-item-7" so I was trying to remove it on only that item.

    I may try using the border... originally my friend was wanting a tapered line, so I was trying to use an image.

    Thanks again.

    Posted 13 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.