I haven't been working on code for ages and I'm facing an issue that is getting me crazy cause I can't even start doing anything. I'm working on the very base of my website and when I try my page the navbar automatically goes on Mobile mode while I'm on desktop.
I tried on Chrome and Firefox with the same results : a shrinked navbar on full-size page (it's not even working correctly as it's not the good size). Reducing the window's size will make the mobile navbar work correctly but impossible to get a normal one. I've tried different styles of navbar from Codepen to see if my code was wrong but same problem. I even tried using Bootstrap 3 instead of 4 and the code gets even worst. This one for example is wrong : https://codepen.io/mmgolden/pen/JNewdL
HTML Head :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
HTML Body :
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-left">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
<a class="navbar-brand mx-auto" href="#"><div id="logo"></div></a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
<!-- Mobile -->
<div class="collapse" id="navbarMobile">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
</ul>
</div>
</nav>
<div class="slider">
</div>
</body>
CSS :
.slider {
background: #333;
height: 400px;
width: 100%;
}
#logo {
background: #ccc;
width: 150px;
height: 70px;
}
.navbar-toggler {
margin-top: 15px;
}
@media screen and (min-width: 992px) {
.navbar {
height: 130px;
}
#logo {
width: 260px;
height: 120px;
position: relative;
bottom: -20px;
}
.navbar-light .navbar-nav .nav-link {
padding-right: 75px;
}
#nav-left {
padding-left: 30px;
}
}
Screenshot : https://ibb.co/KDFqfTH I need it it show up normally on desktop and shrink on mobile/tablet. Thanks for your time.
