<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 ---------->
<header class="header_sec">
<nav class="navbar navbar-expand-md bg-black">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/menu.png" class="img-fluid" alt="menu">
</button>
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">STORE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">DISCORD</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TWITTER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IG</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="images/logo.png" class="img-fluid" alt=""></a>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">MINT</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
/* ==========================================================================
Fonts Css
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');
@font-face {
font-family: 'Upheaval TT (BRK)';
src: url('../fonts/UpheavalTT-BRK-.woff2') format('woff2'),
url('../fonts/UpheavalTT-BRK-.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
Global Styles
========================================================================== */
article,
aside,
details,
video,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
display: block;
}
html,
body {
width: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: #000;
height: 100%;
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
ul li {
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
text-indent: 1px;
text-overflow: "";
}
select::-ms-expand {
display: none;
}
p {
padding: 0;
margin: 0;
}
a {
outline: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
color: #132953;
}
ul,
ol {
list-style: none;
list-style-image: none;
padding: 0;
margin: 0;
}
select,
input,
button,
a {
outline: none;
}
button:focus {
border: 0;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: bold;
}
/* ==========================================================================
Header Css
========================================================================== */
.header_sec nav {
background-color: #000;
}
.nav-link {
color: #fdfd00;
font-weight: 400;
font-size: 20px;
text-transform: uppercase;
font-family: 'Upheaval TT (BRK)';
}
.nav-link:hover{
color: #fff;
}
https://bootsnipp.com/user/snippets/z2vQ1#
