<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 ----------> <!-- START HEADER --> <header class="custom-header"> <nav class="navbar navbar-expand-lg custom-navbar"> <a class="navbar-brand" href="#"><h2 class="logo-custom">LOGO</h2></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav m-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <div class="right-info"> <a href="#" class="btn btn-light login-btn">Login</a> <a href="#" class="btn btn-light get-btn">get started</a> </div> </div> </nav> </header> <!-- END HEADER -->

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'); body{ background-color: #cccccc; font-family: 'Roboto', sans-serif; } .logo-custom{ color: #fff; } .custom-navbar{ height: 100px; background-color: transparent; } .custom-navbar ul{ padding: 0px; } .custom-navbar ul li{ margin-right: 30px; } .custom-navbar ul li a{ color: #fff; font-size: 16px; font-weight: 400; letter-spacing: 0.5px; } .login-btn,.login-btn:focus,.login-btn:hover{ background-color: transparent !important; color: #fff !important; font-weight: 500; border: 0px !important; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; outline: none; box-shadow: none !important; } .get-btn{ background-color: #fff; color: #202020; font-weight: 500; letter-spacing: 0.5px; font-size: 15px; border-radius: 0px; border: 1px solid #fff; width: 140px; height: 50px; text-transform: uppercase; line-height: 38px; } .get-btn:focus{ background-color: #fff !important; color: #202020 !important; font-weight: 500; letter-spacing: 0.5px; font-size: 15px; border-radius: 0px; border: 1px solid #fff; width: 140px; height: 50px; text-transform: uppercase; line-height: 38px; box-shadow: none !important; } .get-btn:hover{ background-color: transparent; border: 1px solid #fff; transition: 0.5s; color: #fff; } .custom-header{ height: 100vh; background-color: #000; }