I stumbled upon a code snippet online for creating a navbar using Bootstrap, and I must say, I love the design. However, when I try to resize my screen, it seems that the navbar is not responsive as expected. The links start disappearing and some weird things happen.
Below is the code for the navbar:
.navbar-new-top{
background: #fff;
}
.navbar-brand{
font-weight: 600;
}
.navbar-brand img{
width: 20%;
}
.navbar-new-top ul{
margin-right: 9%;
}
.navbar-new-top ul li{
margin-right: 8%;
}
.navbar-new-bottom{
background-color: #f7f7f7;
box-shadow: 0 5px 6px -2px rgba(0,0,0,.3);
border-top: 1px solid #e0e0e0;
margin-top: 4%;
height: 40px;
}
.navbar-new-bottom ul li{
margin-left: 2%;
margin-right: 2%;
}
.navbar-nav .nav-item a {
color: #333;
font-size: 14px;
font-weight: 600;
transition: 1s ease;
}
.navbar-nav .nav-item a:hover{
color: #0062cc;
}
.dropdown-menu.show{
background: #f8f9fa;
border-radius: 0;
}
.header-btn{
width: 161%;
border: none;
border-radius: 1rem;
padding: 8%;
background: #0062cc;
color: #fff;
font-weight: 700;
font-size: 13px;
cursor: pointer;
}<nav class="navbar fixed-top navbar-expand-md flex-nowrap navbar-new-top">
<a href="https://www.adopteunvpn.com/" class="navbar-brand"><img src="#" alt=""/>adopteunvpn.com</a>
<ul class="nav navbar-nav mr-auto"></ul>
<?php echo 'Your IP address : ❌ ' . getIp(); ?>
<ul class="navbar-nav flex-row">
<li class="nav-item">
<button type="button" class="header-btn">Button</button>
</li>
</ul>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav class="navbar fixed-top navbar-expand-md navbar-new-bottom">
<div class="navbar-collapse collapse pt-2 pt-md-0" id="navbar2">
<ul class="navbar-nav w-100 justify-content-center px-3">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a></a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
</ul>
</div>
</nav>I have already included Bootstrap 4 in the header of my website.
Can someone please guide me on what might be going wrong here? As a beginner in CSS, I would really appreciate your help.
Thank you in advance!