Grow your CSS skills. Land your dream job.

Navigation hover causing space in header

  • # June 28, 2013 at 9:21 am

    I am noticing that the last item in my navigation when hovered expands the background, but not the header background if the browser window is around 1200px wide. You can see my site here:
    [My Site](http://www.rose-hulman.edu/testing/ “My Site”)

    You have to scale the browser window down to where it is close to the last item on the right side of the navigation, then hover over “internships”, and then to see the gap made by the navigation, move the scroll bar over to the right. Notice the space created at the end of the header bar? What is causing this?

    # June 28, 2013 at 11:34 am

    I get the gap without hovering, it’s the way that you formatted your CSS and HTML document. I’d take a look at maybe reworking the basic structure to solve your problem. You’re using fixed width and fluid percentages widths in odd places.

    # June 28, 2013 at 11:35 am

    The last drop down ul is extending beyond the 1200px screen, causing the horizontal scroll on hover. You just have to position it absolutely from the right, instead of the left. Instead of giving it left:-9999px and 0 on hover, change it to right:…………

    # June 28, 2013 at 2:28 pm

    Thanks Krish!
    That’s all it took. I don’t know why I didn’t think about that. It’s Friday, and my mind is on the weekend I suppose.

    # July 12, 2013 at 2:14 pm

    Well, It fixed it for desktop browsers, but not for anything mobile. Could someone take a look at my site on a tablet or phone and give me some ideas as to what is causing this large space to the right of the header. Also, the header doesn’t extend the full length of the page either. Thanks!
    http://www.rose-hulman.edu/testing/capabilities.html

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".