# navbar - classic
for making navbar first we must add html elements to file
```html
<div class="topnav">  
  <a href="#home">Home</a>  
  <a href="#news">News</a>  
  <a href="#contact">Contact</a>  
  <a href="#about">About</a>  
</div>
```
![[nc-0.png]]
## font and margin
we can specify what font family we want and we add `margin: 0;` so that default  browser margin go away 
```css
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
```
![[nc-1.png]]
## background color and overflow
now we set background for our nav, also we add `overflow: hidden;` so content form next to navbar dose not come to navbar area 
```css
.topnav {
  background-color: #333;
  overflow: hidden;
}
```
## styling link elements
now we need to style  `<a>` elements 
```css
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

```
![[nc-2.png]]
*  `float: left;`  make our element float to left we can also make it float to right with ` float:rigt;`
* `color` make color of our text what we want
* `text-align: center;` make text centered in their  container between the padding 
* `padding: 14px 16px;` make container for our text so it can sit in it 
* `text-decoration: none;` remove the blue text color and under line
* `font-size:` we tell browse how big our font must be

## styling the hover
we can specify what CSS we have when we hover with mouse on element in here a elements
here we make color white and text black 
```css
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
```
![[nc-3.png]]
## styling one of elements 
we can also change some of elements with adding a class to them and then styling 
### adding class
```html
<a class="active" href="#home">Home</a> 
```
### styling
```css
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
```
![[nc-4.png]]
## making nav responsive
[continue](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav)