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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Navigation drop down menu spacing issue

    I'm trying to get all of this extra spacing out of my drop-down menu (when you hover over "Portfolio".

    I finally got the hovering/area that i want, but it pushes the drop-down menu about half way down my page.

    I've only been learning css for a week, please bear with me if my code is a mess

    http://jeffreydowellphotography.com/about/

    my css:
    [CODE].logo-image #topNav nav li a { padding-bottom: 8px; padding-top: 8px; padding-left: 20px; padding-right: 20px; margin-bottom: 70px;}

    #header #topNav nav .folder ul li { margin:10px; padding: 5px; }[CODE]

    I am new to this site. Thank you in advance.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hmm, I think you want to make the following changes:

    Code:
    .logo-image #topNav nav li a {
        margin-bottom: 70px;
        padding: 8px 20px;
    }
    
    .logo-image .subnav {
        margin-top: -78px;
    }
    Get rid of both of the statements highlighted in red and the drop down is a more sensible length. In general negative margins are best avoided for positioning elements like this.

    If you want to retain your border on hover but avoid the link moving down, give it a transparent border top in its normal state:

    Code:
    #nav a{
        border-top:5px solid transparent
    }
    Then on :hover, the border just changes colour and the element doesn't shift down.
    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:

    jddowell (07-17-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Thank you for helping me. I think i got everything in there correct, and it fixed the shifting too.

    But I would like the drop down menu to drop below the word "portfolio," right now the box covers it.

    here is my current [CODE]

    /* ---------->>> navigation hover padding <<<-----------*/

    .logo-image #topNav nav li a { padding: 8px 20px;}
    #nav a{ border-top:8px solid transparent }


    /* ---------->>> dropdown menu inside spacing <<<-----------*/

    #header #topNav nav .folder ul li {padding: 5px; }

    [CODE]

    Thank you,

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You still have:

    Code:
    .logo-image .subnav {
        margin-top: -78px;
    }
    in your css. Lose that and it should be OK.
    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:

    jddowell (07-17-2013)

  • #5
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Is there a css way to disable that piece of code?

    Unfortunately, that is built into the site from square-space, so i can only add new css, I cant modify existing.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You can override it by using increased specificity:

    Code:
    #nav .subnav{margin-top:0}
    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:

    jddowell (07-17-2013)

  • #7
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    wow, thank you! that worked. I sure appreciate the help. Ive been struggling with the drop down thing for a while.

    I would like to add some breathing room under the word "things" in the drop down menu. I tried a bunch of different things, but it didn't seem to affect the text. is there a css for that too?

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a try adding:

    Code:
    #nav .subnav ul {
        padding-bottom:10px;
    }
    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:

    jddowell (07-18-2013)

  • #9
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Thank you SB65 for all of your help. I appreciate it greatly.


  •  

    Tags for this Thread

    Posting Permissions

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