Issues with Hover and Gap Above Fixed Nav Bar

HTML-CSS
1

I’m working on my Product Landing Page. Mostly there with the layout but here are a couple of things bothering me:

  • Try as I might I cannot get the hover functionality to work! Currently have it in the CSS for li a: hover but it does not impact the buttons at the top right. I have removed all other references to color to ensure this isn’t the cause.

  • There is a gap above my header. I have tried setting the top margin to 0px on the header, body, and nav bar but it remains no matter what I try.

Any guidance much appreciated!

https://codepen.io/krisjowen/pen/LYLBjqq

2

Hi krisjowen,

For the hover issue, try removing the space in “a: hover” so it reads “a:hover”.

Since your header is using fixed position, you can try setting top (and left if preferred) properties to 0 in order to align it at the top of the screen.

#header {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

There is a default margin being applied to your <ul> on your navbar, so you can set the margin on this to 0 to also keep it in-line with your header.

Hope that helps!

Edit: I could also receive the same result on your codepen by setting the body to margin: 0. Are you sure this doesn’t work for you? As with CSS I find there are always multiple ways to achieve a desired outcome.

1 Like
3

That is amazing help thanks! Can’t believe the hover was as simple as a space - I though I had tried everything for both issues but apparently not.

Nearly there but I cannot get the

    to align to the top of the page. I’ve gone overboard at the moment at set everything I can think of with a margin-top: 0px and it just won’t budge…

4

You might want to set 0 on the bottom margin too; since you’re only clearing the top, the default bottom margin is still being applied and this is pushing the element down.

5

It’s done it! Thanks so much - now to crack on with making it look pretty.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.