About multiple navigation bars

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 ids (or classes, if the styles are intended to be reusable).

1 Like

I have tried that, but no luck it styled nothing in live. I use brackets for practice

Maybe this will help :slightly_smiling_face:

<!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.

https://imgur.com/ivP1Rur

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:

https://imgur.com/JL1SrZF

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. :slightly_smiling_face:

1 Like

For some reason using those dots to put html code here is not working. Idk why.

It is not three dots. It is three backticks. They must be on a separate line before the first line of code and on a separate line after the last line of code.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

1 Like