How do i style new navigation bar in CSS without it affecting already existing one? Both have li’s, ul’s and anchors?
Give them id
s (or classes, if the styles are intended to be reusable).
I have tried that, but no luck it styled nothing in live. I use brackets for practice
Maybe this will help
<!DOCTYPE html>
<html>
<head>
<title>2 Navbar CSS</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
nav{
height: auto;
padding: 1em;
}
#nav1{
background-color: gold;
}
#nav2{
background-color: pink;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<nav id="nav1">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
</body>
</html>
Ok i made another navigation bar with id’s , in order to style list and anchors i had to use #nav2 #list #link all together for some reason see it in a pic bellow.
But now im trying to center the navigation bar somehow, but idk how, i did it with position set to relative and right go for 43% (see in a picture above). But im sure this isnt the best way to do it, is there any better ways?
Here’s a pic:
Sorry idk how to put code here.
I suggest you should give HTML code alongside making less confusion.
For using the code block; there is a </> button near the blockquote icon "
1. Your #link
should be a class
not id
cause you use it on Media which apply to all elements.
#nav2{
list-style-type:none;
margin: 0;
padding: 0;
position: relative;
top: 100px;
text-align: center;
}
/* I think you use <ul id="list"> */
#nav2 #list{
display: inline-block;
}
/* and you use <li id="link"> which should be <li class="link">*/
#nav2 #list .link{
display: block;
padding: 8px;
background: #ddd;
text-align: center;
color: dimgray;
text-decoration: none;
}
#nav2 #list .link:hover{
background-color: dodgerblue;
}
Hope this help.
For some reason using those dots to put html code here is not working. Idk why.