[ad_1]
Asked
Viewed
8 times
I have a navbar menu in bootstraps 4. When I resize the page, it resizes after a certain size threshold, but before it collapses, the far-right item “Opportunities” in the navbar is being cutoff.
In other words, it’s cutting off items – it eventually collapses if the window gets too small – but before that, it’s cutting off. See photo here:
Is there an easy fix here? Code below..
/* ------------------------------Navigation------------------------------*/
/* Navigation pills */
#navPills li{
padding:6px 6px 6px 6px !important;
font-size: 14px !important;
}
#nav-pills ul{
}
/* Navigation pills text*/
.btn.btn-s-md.btn-white.m-b {
font-size: 14px !important;
letter-spacing: .04em;
}
.navbar {
background-color:#f7f7f7 !important;
padding-bottom:10px;
border-bottom:1px solid #E6E7E8;
-webkit-box-shadow: 0px 1px 2px rgba(159,159,155,0.4)
}
#toggle {
background-color:none;
color:black;
}
.nav-item {
text-align: right;
padding:0px 10px 0px 10px
}
.nav-link {
text-align:left;
font-size:14px;
color:#0c2d1c !important;
}
#navbarNav {
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<body>
<!-- Navigation -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="people.html" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="research.html" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="publications.html" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="teaching.html" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html" class="btn btn-s-md btn-white m-b">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
</nav>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
lang-html
[ad_2]