Why is it wrapping?

DarkxPunk · February 2, 2016

Hey there,

I am playing around with making a header responsive and running into something that does not seem to be expected...

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, user-scalable=no"/>
		<base href="">
		<title>Razno Renovations</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/default5.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header>
			<div class="logo">
				<a href="">
					<span class="logotype">Razno Renovations</span>
				</a>
			</div><div class="nav">
				<label class="navButtonLabel" for="navButton" onclick="">
					<input type="checkbox" id="navButton" role="button" />
					<span class="hamburger"></span>
				</label>
				<nav>
					<ul>
						<li id="navAbout"><a href="">Who We Are</a></li>
						<li id="navServices">
							<a href="">Our Services</a>
							<ul>
								<li id="navFlooring"><a href="">Flooring</a></li>
								<li id="navElectical"><a href="">Electrical</a></li>
								<li id="navDrywall"><a href="">Drywall</a></li>
								<li id="navBasement"><a href="">Basement Finishing</a></li>
								<li id="navDeckFence"><a href="">Deck & Fence</a></li>
								<li id="navWindowDoor"><a href="">Windows & Doors</a></li>
							</ul>
						</li>
						<li id="navContact"><a href="">Start Your Project</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section></section>
		<footer></footer>
	</body>
</html>

CSS:

html,body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-size: 10px;
	font-family: arial,helvetica,sans-serif;
	background: #c83837;
}
body {
	min-width: 32rem;
}
a,a:link,a:visited,a:hover,a:active {
	text-decoration: none;
	color: #c83837;
	font-size: 1.4rem;
}
a:link {
	
}
a:visited {
	
}
a:hover {
	
}
a:active {
	
}
p,li {
	margin: 1rem 0;
	font-size: 1.4rem;
	color: #fcfcfc;
}
h2 {
	margin: 1rem 0;
	font-size: 1.8rem;
	color: #c83837;
}
li {
	margin: 0 0 0 1.8rem;
	list-style: disc;
}
header {
	width: auto;
	min-width: 0;
	height: 4em;
	box-shadow: 0 -0.4rem 2.1rem 0.3rem rgba(0,0,0,0.6);
	position: fixed;
	left: 0;
	right: 0;
	background: #c83837;
}
.logo {
	width: 100%;
	height: 2.8rem;
	max-width: 36rem;
	padding: 0.6rem 0 0.6rem 0;
	text-align: center;
	display: inline-block;
	float: left;
}
.logo a {
	display: inline-block;
}
.logotype {
	font-size: 2.8rem;
	font-weight: bold;
	color: #fcfcfc;
	display: inline-block;
	line-height: 2.8rem;
}
.nav {
	width: calc(100% - 36rem);
	min-width: 2.5rem;
	height: 4rem;
	text-align: center;
	float: left;
}
nav {
	display: inline-block;
}
nav ul {
	display: inline-block;
}
nav ul li {
	margin: 0 0.5em;
	display: inline-block
}
nav ul li a{
	display: inline-block;
	color: #fcfcfc !important;
}
nav ul li ul {
	display: block;
	position: absolute;
}
nav ul li ul li {
	margin: 0;
	display: block;
}
nav ul li ul li a {
	display: block;
}
#navButton {
	float: left;
	visibility: hidden;
}
.navButtonLabel {
	display: inline-block;
	cursor: pointer;
}
.hamburger {
	margin: 0.2em;
	height: 1.4em;
	width: 2.5em;
	font-size: 1rem;
}
.hamburger,.hamburger:before,.hamburger:after {
	border-top: 0.3em #fcfcfc solid;
	content: "";
	display: block;
	position: relative;
}
.hamburger:before {
	top: 0.4em;
}
.hamburger:after {
	top: 0.8em;
}

So what I expect is this, as I shrink down the width of the page, as the nav hits its minimum limit the logo should then start to shrink down, however instead the nav wraps and falls below... Now I did attempt to do no-wrap, but no luck... Any ideas?

Ingolme · February 2, 2016

The width of the logo is still 100%, that means as wide as the screen. The max-width will cut it down to 36rem, but it won't ever get smaller than that because the rules tell it to be as wide as it can. If you want it to shrink you will need to give it a percentage width.

DarkxPunk · February 2, 2016

I get it... Thanks.

Sign In

Why is it wrapping?

Recommended Posts

DarkxPunk

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

DarkxPunk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity