15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

Help solve this css issue

by BenQ
13 replies
  • WEB DESIGN
    • |
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:
#css #issue #solve
  • Profile picture of the author Andy Crofford
    Looks like your issue is fixed, is that correct?

    Andy
    {{ DiscussionBoard.errors[3488237].message }}
  • Profile picture of the author BenQ
    No, the problem is still there.

    made a quick video to explain the problem better: http://screencast.com/t/Sjo02hpOgrb
    Signature
    {{ DiscussionBoard.errors[3488263].message }}
  • Profile picture of the author Andy Crofford
    Which browser are you checking this in? I can't replicate the problem in Chrome.
    {{ DiscussionBoard.errors[3488290].message }}
  • Profile picture of the author BenQ
    firefox. I just added a video to my previous post.
    Signature
    {{ DiscussionBoard.errors[3488363].message }}
  • Profile picture of the author Andy Crofford
    Can't you just go to the template for the pages and remove the menu?
    {{ DiscussionBoard.errors[3488506].message }}
  • Profile picture of the author BenQ
    I can't do as you suggest. Still looking for a css solution.
    Signature
    {{ DiscussionBoard.errors[3488797].message }}
    • Profile picture of the author Esteem Ladder
      It's in line 51 of your css stylesheet. Change display:block; to display:none;

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

      HTH,

      EL
      {{ DiscussionBoard.errors[3490142].message }}
  • Profile picture of the author BenQ
    Esteem, no, changing it to none takes it off the home page as well. I need it to be on that page.
    Signature
    {{ DiscussionBoard.errors[3490402].message }}
    • Profile picture of the author Esteem Ladder
      Originally Posted by Benq View Post

      Esteem, no, changing it to none takes it off the home page as well. I need it to be on that page.
      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.

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

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

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

      .home_page #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.
      {{ DiscussionBoard.errors[3490536].message }}
  • Profile picture of the author kjhosein
    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
    Signature
    <!--PM me for a quicker reply. Thx!-->
    {{ DiscussionBoard.errors[3491276].message }}
  • Profile picture of the author BenQ
    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;
}
    Signature
    {{ DiscussionBoard.errors[3492410].message }}
  • Profile picture of the author mahesh2010
    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
    Signature
    Mobile Website Design
    {{ DiscussionBoard.errors[3492691].message }}

Trending Topics