Header is responsive, why is my navigation not?

I am trying to creative a responsive site, but the navigation isn’t responsive and it is showing a scrollbar at the bottom of the page, as the image shows. It also hides some of my navigation… What am i doing wrong?

btw. please don’t mind whatever the text says, it’s pretty random anyway.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=.5" />
	<link rel="stylesheet" type="text/css" media="screen" href="styles/style.css">
	<title>Magnus Portfolio</title>
</head>
<body>
<header>
	<h1 class="row">
		Hostel California
	</h1>
	<nav>
		<ul>
			<li class="row">
				Forside
			</li>
			<li class="row">
				Typografi
			</li>
			<li class="row">
				Grafisk Design
			</li>
			<li class="row">
				Billedbehandling
			</li>
			<li class="row">
				Grafisk Workflow
			</li>
		</ul>
	</nav>
</header>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
	font-family: ropa;
}

 .row:after {
    content: "";
    clear: both;
    display: block;
} 

header {
	width: 100%;
	height: 53px;
	background-color: red;
}

header nav {
	width: 70%;
	margin-left: 64%;
}

header nav ul li {
	float: left;
	padding-top: 18px;
	text-decoration: none;
	list-style: none;
	margin-left: 35px;
	height: 23px;
	text-align: center;
	font-size: 19px;
}

header nav ul li:hover {
	border-bottom: 2px solid blue;
}

h1 {
	float: left;
	margin: 10px 0px 0px 18px;
}






@font-face {
    font-family: ropa;
    src: url(../fonts/RopaSans-Regular.ttf);
}








/*
EKSTRA KODER





@font-face {
    font-family: kaushan;
    src: url(../fonts/KaushanScript-Regular.ttf);
}


*/

Without dissecting the merits or demerits of your code, this is causing the placement of the list items to overflow to the right, even though they are floated left.

Do you have any idea how to use the developer’s tool in your browser? What browser do you use?

header nav {
    margin-left: 64%;  /* reduce me */
    width: 70%;  /* why do you need me? */
}

This is the obvious culprit.
70 + 64 = 134
That’s not all I would change, but I can’t spare the time right now.

Ninja’d by @ronpat

1 Like

Thx! Haven’t even thought about that! :slight_smile:

Not sure what you mean by the “Reduce me” and “Why do you need me?” :slight_smile: I am using Chrome. Developers tool? I use inspect element, if that’s what you mean?

btw. Should i stop using ul and li for navigation? I’m still pretty new to this.

Thx guys! I stopped the overflowing on the right. But now i got another problem. How do i keep my navigation inside the header. When i resize the window, the nav goes down under eachother. Like this.

It’s a reference to “Alice in Wonderland”, aka “Through the Looking Glass”.
I am speaking as if I were that property.

OK, thanks for the info. [quote=“MtildetT, post:5, topic:237868”]
Should i stop using ul and li for navigation? I’m still pretty new to this.
[/quote]

No need to stop. There are simply other choices available nowadays.

I suggest that you add a temporary yellow,etc outline to the logo box, the ul and nav boxes and maybe even the list items so you can see how much room they are occupying. You will also be able to see when and why the menu items are wrapping. Your dev tools should help you quantify the dimensions if needed. SamA74 was showing you that you were exceeding 100% of the width of the page. Hopefully, you have reduced those widths to less than 100%.

For starters, don’t give the header a fixed height:

header {
  height: 53px;
}

Fixed heights are deadly, and basically should never be used. However, you’ll then have the problem of floated items hanging outside their container. This is most easily fixed with something like this:

header {
  overflow:hidden;
}

That will only cause you issues if you decide to have a drop down menu, but that doesn’t look likely here.

This is an alternative without any floats, excessive margins or fixed heights. It uses display table to put the h1 and nav side by side, using text-align to place them left and right of the screen.
Floating everything causes too much disruption to the flow.
Big margins will always get in the way of responsiveness, as does fixed heights.
Some smaller changes like making font sizes em instead of px for improved accessibility.

One other thing I did not notice earlier.
Why initial-scale=.5?

1 Like

Thx! Never seen that method before.

I was told that i need the “initial-scale=.5” on all my pages. I’m removing it now :stuck_out_tongue:

The only reason to use em instead of pixels, is if u want to change the font size for all your text. Instead of changing them all one by one, right?

Don’t remove the the viewport tag altogether, you need it to be responsive.
But intitial scale should be 1. :smiley:

Thx! :slight_smile:

Oh, i don’t really remember alice in wonderland :stuck_out_tongue:

The outline on every element is really helpful! thx!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.