top navbar css
Copy
nav{
display: flex;
align- items: center;
position: sticky;
top: 0px;
align- items: center;
min- height: 8vh;
}
nav :: before{
content: "" ;
background- color: rgb (255 , 255 , 255 );
position: absolute;
top:0px;
left:0px;
height: 100 %;
width:100 %;
z- index: - 1 ;
opacity: 0.4 ;
}
color:rgb (0 , 0 , 0 );
text- transform: uppercase;
letter- spacing: 5px;
margin- left: 20px;
margin- right: 60px;
font- size: 22px;
}
. nav- links{
display: flex;
justify- content: space- around;
width: 18 %;
}
. nav- links li{
list- style: none;
display: inline- block;
}
margin- left: 20px;
margin- right: 10px;
}
padding- left: 5px;
}
. nav- links a{
color:rgb (0 , 0 , 0 );
font- size: 20px;
text- decoration: none;
letter- spacing: 3px;
font- weight: bold;
width: 150px;
display: inline- block;
text- align: center;
}
. cool- link :: after{
content: '' ;
display: block;
width: 0 ;
height: 2px;
background: rgb (0 , 0 , 0 );
transition: width . 3s;
}
. cool- link:hover :: after{
width:100 %;
transition:width . 3s;
}
. btn{
border: 1px solid
background: none;
padding: 10px 20px;
font- size: 25px;
font- family: "montserrat" ;
cursor: pointer;
margin: 10px;
transition: 0 . 8s;
position: relative;
overflow: hidden;
text- decoration: none;
}
. btn :: before{
content: "" ;
position: absolute;
left: 0 ;
width: 100 %;
height: 0 %;
background:
z- index: - 1 ;
transition: 0 . 8s;
}
. btn a{
text- decoration: none;
color:
}
. btn4{
color:
}
. btn4:hover{
color:black ;
}
. btn4 :: before{
bottom: 0 ;
border- radius: 50 % 50 % 0 0 ;
}
. btn4 :: before{
height: 180 %;
}
. btn4:hover :: before{
height: 0 %;
}
. burger{
position: absolute;
right: 30px;
cursor: pointer;
display: none;
}
. burger div{
width: 25px;
height: 3px;
background- color: rgb (5 , 5 , 5 );
margin: 5px;
}
@media screen and (max- width: 670px)
{
body{
overflow- x: hidden;
}
. nav- links{
position: absolute;
right: 0px;
height: 25vh;
top: 8vh;
background- color: rgb (241 , 241 , 241 );
display: flex;
flex- direction: column;
align- items: center;
width: 50 %;
transform: translateX (100 %);
transition: transform 0 . 3s ease- in;
}
. nav- links a{
color:rgb (0 , 0 , 0 );
font- size: 20px;
text- decoration: none;
letter- spacing: 3px;
font- weight: bold;
display: inline- block;
width: 150px;
text- align: center;
margin- left: 50px;
}
. nav- active{
transform: translateX (0 %);
}
. burger{
display: block;
}
}