78 lines
2 KiB
Markdown
78 lines
2 KiB
Markdown
# 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)
|
||
|
||
|