Need to figure out CSS code for scaled down navigation bar


#1

Hi, I’m creating a navigation bar for a website. I’m trying to get it to scale down based on different browser sizes while still maintaining it’s shape. I want the logo on the left, and the text as it is, but when I scale it down, the text goes either underneath the logo and the green banner, or it goes behind the logo. I’ve since deleted the code I had for the “@media screen” sections because I’m trying to find another way to do it.

I will post the code here:

HTML:


/*<!DOCTYPE html>
<html>
	<head>
		<title>Responsive Navigation Bar</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta name="viewport" content-type="widht=device-width initial-scale=1">
	</head>
<body>
		<div id="header">
			<div id="logo">
				<img src="banner logo.png"/>
			</div>
			<ul id="navbar">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
</body>
</html>*/

CSS

/**{margin: 0px; padding: 0px;}
body{background: white;}
#header{width:100%;height: 80px;background: rgb(0, 166, 81);position: absolute;}
#navbar{width:1000px;height: 80px;float:right;}
#navbar>li{width:200px;list-style: none;float:left;}
li>a{display: block;color:black;line-height: 80px;
	text-align: center;font-family: "Arial";font-size: 20px;font-weight: bold;text-decoration: none;padding-left:10px;}
#logo{width: 200px;height: 80px;float: left;padding-left: 40px;position: absolute;}
	li>a:hover{background: white;color: rgb(0, 166, 81)}
li>a:focus{background: yellow;color: black;}
@media screen and (max-width:1260px;){
/*I need to figure out how to resize the banner without the text overlapping the logo. I just want the logo and text to look scaled down while the green background banner for the navigation bar still stretches across the page.*/
}
@media screen and (max-width: 1060px){

}
@media screen and (max-width: 480px;){

}*/

#2

using px for width:

#navbar{width:1000px;height: 80px;float:right;}
#navbar>li{width:200px;list-style: none;float:left;}

is a really bad idea, px are a disaster to scale. using em and % works better

you really need to get rid of the idea to keep everything (image and text) on a single line, this will becomes so small. Some mobile devices in portrait mode would make the text so small its unreadable to keep it inline

you should look into max-width, this way you can give a max-width for smaller devices to keep everything in line (combined with width: 10% or something, this works really nice)