Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts

    .nav-primary behind .site-header

    I've got a bottom only box-shadow on nav-primary (main navigation) at the top of the site, but no one can see it because .nav-primary falls behind .site-header. Haven't been able to find a way to fix this. Ideas? (see attached)

    My Website — Just another WordPress site
    Attached Thumbnails Attached Thumbnails .nav-primary behind .site-header-capture.gif  

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't see a box-shadow in the css for that element, but if you want it to sit above .site-header it needs position:relative as well as a z-index.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts
    Sorry, I had it commented out. It's there now. I've got the positioning (relative, absolute) right, but now the .site-header sits underneath the nav and I can't correct with top margin or padding (?)

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts
    Nevermind - I got it! : )

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Make .nav-primary position:relative, not absolute. That'll stop it sitting on top.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    johndove523 (03-13-2014)

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    114
    Thanks
    33
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •