Issues with Hover and Gap Above Fixed Nav Bar

[krisjowen]

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

[laury]

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.

[krisjowen]

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…

[laury]

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.

[krisjowen]

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