CODEWITHSUNDEEP
htmlcss
Joshua Palfreman
Joshua Palfreman

Reputation: 83

Aligning logo with nav bar

I am very new to web development and am currently trying to get a logo and list items to align with one another in the header. I would greatly appreciate your advice on what to do to fix this problem.

I have included a gist link to reference. https://gist.github.com/59c56461658d2011f8fc

Many thanks,

Josh

Upvotes: 3

Views: 71

Answers (3)

Vinod Gupta
Vinod Gupta

Reputation: 19

You are not define logo image max height and max width. So your logo going outside of header section.

Put this css to your css file:

.logo img {
  max-height: 100%;
  max-width:100%;
}

Upvotes: 1

HTMLNoob
HTMLNoob

Reputation: 821

Ok All you have to do is change the nav from float: right; to float: left;

Here is a link from codepen:

<a href="http://codepen.io/HTMLNoob/pen/xZYrpW">Example</a>

Upvotes: 0

Hybrid
Hybrid

Reputation: 7049

Your logo is overflowing because the <img> height is not set. If you set the height via CSS, it will be restricted to the max height of its parent (the navbar). You can do this by adding the following code to the CSS:

.logo img {
  height: 100%;
}

JSFiddle: https://jsfiddle.net/Hybridx24/pxd1pjwz/

Upvotes: 1

Related Questions