"Untitled"
Bootstrap 4.1.1 Snippet by sharmeenmitu

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Responsive Food/Resturant Website Design Tutorial</title> <link rel="stylesheet" href="fonts/font-awesome.css"> <link rel="stylesheet" href="css/bootstrap-4.5.3-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="fonts/google-fonts.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> </head> <body> <header id="header"> <nav> <ul> <li><a href="#home">home</a></li> <li><a href="#special">special</a></li> <li><a href="#about">about</a></li> <li><a href="#dish">dishes</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> <a href="#" class="logo"><img src="images/chef_png_3.png" alt=""></a> </header> </body> </html>
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Exo 2', sans-serif; text-transform: capitalize; -webkit-transition: all .2s linear; transition: all .2s linear; } html { font-size: 62.5%; scroll-behavior: smooth; } body { overflow-x: hidden; } #header { width: 100%; position: fixed; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 2rem 4rem; z-index: 1000; } #header .logo img { height: 5rem; } #header nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; list-style: none; } #header nav ul li { margin-right: 4rem; } #header nav ul li a { color: #fff; font-size: 2rem; } #header nav ul li a:hover { color: #FFF200; text-decoration: none; } .header-active { background: #333; height: 6rem; -webkit-box-shadow: .2rem 0 .5rem #000; box-shadow: .2rem 0 .5rem #000; } .header-active nav ul { margin: 0; }

Related: See More

Vue Material Kit

Questions / Comments: