About multiple navigation bars

About multiple navigation bars
0

#1

How do i style new navigation bar in CSS without it affecting already existing one? Both have li’s, ul’s and anchors?


#2

Give them ids (or classes, if the styles are intended to be reusable).


#3

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


#4

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>

#5

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.


#6

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:


#7

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


#8

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.