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!
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.
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.
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…
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.
It’s done it! Thanks so much - now to crack on with making it look pretty.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.