css simple navbar

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Navbar</title> <style> body { margin: 0; } .navbar{ padding: 15px; background-color: grey; display: flex; justify-content: space-between; font-size: 30px; text-decoration: none; color: #fff; } .nav-item { margin: 0; padding: 0; flex: 1; max-width: 50%; display: flex; justify-content: space-evenly; font-size: 25px; } .nav-link { display: inline-block; } a{ text-decoration: none; color: #fff; } @media (max-width: 715px) { .nav-item { flex-direction: column; align-items: center; } .nav-link { margin: 5px 0; } } </style> </head> <body> <nav class="navbar"> <a class="brand" href="">Navebar</a> <ul class="nav-item"> <li class="nav-link"><a href="">Learn more</a></li> <li class="nav-link"><a href="">About</a></li> <li class="nav-link"><a href="">Contact</a></li> </ul> <a class="home" href="">Home</a> </nav> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Navigation</title> <style> .navbar{ background-color: black; border-radius: 30px; } .navbar ul{ overflow: auto; } .navbar li{ float:left; list-style: none; margin: 13px 20px; } .navbar li a{ padding: 3px 3px; text-decoration: none; color: white; } .navbar li a:hover{ color: red } .search{ float: right; color: white; padding: 12px 75px; } .navbar input{ border: 2px solid black; border-radius: 14px; padding: 3px 17px; width: 129px; } </style> </head> <body> <header> <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> <div class="search"> <input type="text" name="search" id="search" placeholder="Search this website"> </div> </ul> </nav> </header> </body> </html>

top navbar css

/* This is the css for the nav bar*/

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;
}


#logo{
    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;
    
}

#N1{
    margin-left: 20px;
    margin-right: 10px;
}
#N2{
    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;
}
/* designing of the buttons */
.btn{
    border: 1px solid #3498db;
    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: #3498db;
    z-index: -1;
    transition: 0.8s;
   
  }
  .btn a{
    text-decoration: none;
    color:#fff;
    
  }
  .btn4{
    color: #fff;
    
  }
  
  .btn4:hover{
     color:black ;   /*  change the color*/
  }
  
  
  .btn4::before{
    bottom: 0;
    border-radius: 50% 50% 0 0;
  }
  .btn4::before{
    height: 180%;
  }
  
  .btn4:hover::before{
    height: 0%;
  }


/* button ends */

.burger{
    position: absolute;
    right: 30px;
    cursor: pointer;
    display: none;
}
.burger div{
    width: 25px;
    height: 3px;
    background-color: rgb(5, 5, 5);
    margin: 5px;
}


/* Nav bar in the mobile version*/

@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;
       /* canging the z index of the */

    }

    .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;
    }
  
}

Posted by: Guest on April-18-2021

Code answers related to "css simple navbar"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "css simple navbar"

Code answers related to "css simple navbar"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us