html – How do you make a navigation bar sit parallel with the logo?-ThrowExceptions

Exception or error:

I am trying to make my nav bar sit parallel with my logo but I’m having difficulty doing this.

First of all, when I enter the code for the image, the image afterwards doesn’t display at the top of the page.

Instead, it sits about 40px below the page. I have tried using floats, but have had no luck.

I have created a negative value of -20px for the logo to sit further at the top of the page but would like to know if that is normal practice in CSS

I have tried looking at youtube videos but the code they share doesn’t seem to work on my project. I’m just wondering whether the image may be a bit too big for the header

How to solve:

I would definitely recommend using Flexbox. It takes the hard work of setting floats and setting things in a manual way out of your way. Here is a cheat sheet and a little background into using Flexbox. It’s also responsive too.

The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this helps.

###

if want to easily make a navbar you can go to the website listed below and you can pick which one of the navbars you want then alter or change it based on what you like it has all styles of navbar with logo without a logo or even the style you want.

link to navbar code:
https://www.w3schools.com/css/css_navbar.asp

Leave a Reply

Your email address will not be published. Required fields are marked *