Hey everyone,
First off, I managed to get all my tests passed for this project, but a few things came out of the project that I would like to give attention too before getting my certification.
Getting the tests passing is one thing, but being proud of my project is a whole different important ball game for me.
First issue: My navigation bar is now fixed to the top of the viewport, but the rest of my page now hides behind the navigation bar.
I tried adding margin-top to the first div in the body but that just dropped my navigation bar. Not sure what I am missing 
Second issue: I can’t get my menu links closer to each other on the right of the navbar.
I used justify-content: space-around; which distributes the menu nicely across the navbar. But I would like the menu items to be closer to each other. How can I go about doing that?
Here’s an image of the navbar and Codepen below that
Thanks for your help! Appreciate the assistance
Ok, so there are a couple other things to take a look at here first. You have the <header> and <nav> tags before the body of your HTML. That space should just be for your <head> elements, and with Codepen that actually gets entered into the settings page and not in the editor itself.
Next, to get rid of that little bit of space above the navbar, add in the following to your header selector:
top: 0;
left: 0;
Also, the float: right you have under the nav-link class is unnecessary since you are using flexbox. The extra <div> tags surrounding your h2 are also unnecessary, the <div id="sign-up"> one is all you need.
Now to push the header down more so it isn’t behind the navbar, you can just add some more padding-top to the #sign-up selector. You currently have it set at 50px, but if you change it to 150 or so it’ll be closer to where you want it.
Your navbar links should also be placed inside of an unordered list. Check out this article on how to create a navbar using flexbox that has an image off to the side.
1 Like
Hello, Cris:
I Went in to your code pen and paly a little with your code: I reduce the widt in your image and now the Navbar is smaller.
In this case @slamoureux Give you an excellent answer!!
Edit: I can´t sleep so I made 3 new classes for one each of your menus and applied a margin in one each of them. Attached Image
Saludos!!!
1 Like
