Help solve this css issue

by 13 replies
15
WP site on Thesis theme. I have a different header (full page) for the home page made with a .home_page class.

On this home page are 3 links "about" "products" and "contact us".

My problem is these 3 links bleed through to the header on the inner pages. You can't see them, but if you cursor over the tagline in the inner page headers you see their titles and they are clickable. This is easily seen with firebug.

How do I get rid of this on the inner pages?

Tried .home_page ul.menu {display:none} but that didn't work. Any ideas?
Here's the site:
#website design #css #issue #solve
  • Looks like your issue is fixed, is that correct?

    Andy
  • No, the problem is still there.

    made a quick video to explain the problem better: http://screencast.com/t/Sjo02hpOgrb
  • Which browser are you checking this in? I can't replicate the problem in Chrome.
  • firefox. I just added a video to my previous post.
  • Can't you just go to the template for the pages and remove the menu?
    • [1] reply
    • I don't think I can do that in Thesis. At least never tried -- I'm looking to see.
  • I can't do as you suggest. Still looking for a css solution.
    • [1] reply
    • It's in line 51 of your css stylesheet. Change display:block; to display:none;

      #header #products, #header #about, #header #contact {
      bottom: 50px;

      height: 28px;
      position: absolute;
      text-indent: -9999px
      }

      HTH,

      EL
  • Esteem, no, changing it to none takes it off the home page as well. I need it to be on that page.
    • [1] reply
    • Ahhh. Okay, I see. Sorry, I just quickly looked at the code on the one page. Add the .home_page prefix to these lines. Seems to work in firebug.

      #header #products, #header #about, #header #contact {
      bottom: 50px;
      display: block;
      height: 28px;
      position: absolute;
      text-indent: -9999px;
      }

      #header #about {
      width: 126px;
      right: 718px;
      }

      #header #products {
      width: 126px;
      right: 562px;
      }

      #header #contact {
      width: 155px;
      right: 370px;
      }

      If that doesn't work you may have to do a <div> and conditionally hide it in the header php.
  • One other thing @benq and @esteem. If you're using the separate custom CSS (hopefully), then you should prepend .custom to those CSS lines like:
    Code:
    .custom .home_page .... {}
    That is so your custom rules are more specific and those will take precedence over the built-in CSS rules.

    For more info: Customizing Thesis with custom.css
  • Resolved. Took care of it by adding:

    Code:
    div#header > a {
    display: none !important;
}
div#header > a#offer {
    display: block !important;
}
body.home_page div#header > a#offer {
    display: none !important;
}
body.home_page a#about, body.home_page a#products, body.home_page a#contact {
    display: block !important;
}
  • Hi,
    I checked your code thoroughly
    it seems that yoou have not used valid CSS and html
    please validate your code using w3 validator and try to slove errors
    then you can find the problem
Join the discussion

Next Topics on Trending Feed

  • 15

    Help solve this css issue

    WP site on Thesis theme. I have a different header (full page) for the home page made with a .home_page class. On this home page are 3 links "about" "products" and "contact us".