Making navbar change font-size when resizing

Community Off Topic
#1

Is there anyone talented in website development to tell me how I can make a navbar look like this in this website: http://www.templatemonster.com/demo/52266.html ? The main point that I am willing to learn is how do I make the navbar change as I resize the window. I am not copying the website but I am learning. Is there someone who can help me out?

#2

you could use the media query, which allows you to set different css property’s for different screen widths.

1 Like
#3

Thank you for the reply.

I used it but still I was getting errors.

Here is the CSS code:

body{
	margin: 0px;
}

nav{
	height: 100%;
	width: 100%;
	background-color: #303030;
	display: table;
}

#logo{
	height: auto;
	margin-bottom: -4px;
}

.navbar{
	width: auto;
	float: right;
}

ul{
	float: right;
	margin-top: 2%;
	padding: 0px;
	margin: 0px;
	height: 112px;
}

ul .li1{
	display: inline-block;
	position: relative;
	padding: 0px 0px;
	position: relative;
	top: 50%;
	transform: translateY(100%);
	margin-top:5px
}

ul li{
	background-color: #303030;
	display: inline-block;
	position: relative;
}

ul li a{
	padding: 10px;
	display: block;
	text-decoration: none;
	color: #969696;
	text-transform: uppercase;
	font-family: arial;
	font-weight: 100;
	font-size: 12px;
}

ul .li2 a{
	color: white;
}

ul ul{
	position: absolute;
	padding: 0px;
	margin-top: 39px;
	display: none;
	z-index: 1;
}

ul ul li{
	margin-left: -10px;
	width: 200px;
	background-color: #4a4a4a;
}

ul ul ul{
	position: absolute;
	right: 100%;
	top: -115%;
	margin-left: 10px;
	z-index: 1;
	background-color: #515151;
}

ul li:hover > ul{
	display: block;
}

ul .li2 a:hover{
	background-color: orange;
}

ul .li2:hover{
	background-color: orange;
}

ul li a:hover{
	color: white;
}

ul li:hover{
	color: white;
}

@media only screen and (min-width: 948px){
	nav ul .li1{
		transform: scale(1.4)
	}
}
#4

uhm… that is a different question altogether. li2/li3 doesn’t exist. You didn’t provide html code? Error message? It is non exercise related. Please make a new topic, this is a different question

1 Like
#5

When everything is sorted out (element types), try moving the @ rule to the top of the style sheet. I’m a little out of touch but in the old days it was de facto accepted that all @ rules must be parsed before anything else.

1 Like