Issues with the Navbar collapsing are causing the right-most item to be cut off too soon

I am facing an issue with my Bootstrap 4 navbar menu. When I resize the page, it reaches a certain size threshold where the far-right item "Opportunities" in the navbar gets cutoff before collapsing.

In simple terms, the items are getting cut off before the navbar collapses due to small window size. You can see the issue in this photo:

https://i.sstatic.net/IYRwL.jpg

Is there an easy solution for this problem? Here is the relevant code snippet 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d697029323a3a31381d6e736b736c">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9adec79e858d8d868faad9c4dcc4db">[email protected]</a>/js/bootstrap4-toggle.min.js"></script>

htmlcssbootstrap-4navbar

Answer №1

After reviewing the Navbar example in Bootstrap 4 documentation (https://getbootstrap.com/docs/4.0/components/navbar/), it appears that removing the li classes will prevent any overlap with the viewport edge.

To achieve consistent collapse behavior and button styling, consider applying these classes to the ul element instead. Below is a modification of your existing code:

<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 btn btn-s-md btn-white m-b">    
    <li>
      <a href="index.html">ABOUT
      </a>
    </li>
    <li>
      <a href="people.html">
        PEOPLE
      </a>
    </li>
    <li>
      <a href="research.html">RESEARCH
      </a>
    </li>
    <li>
      <a href="publications.html">PUBLICATIONS
      </a>
    </li>
    <li>
       <a href="media.html">
      MEDIA
      </a>
    </li>
    <li>
       <a href="teaching.html">
      TEACHING
      </a>
    </li>       
    <li>
       <a href="opportunities.html">
      OPPORTUNITIES
      </a>
    </li>     
  </ul> 
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered in bottle.py when attempting to concatenate objects of type 'str' and 'NoneType'

https://i.sstatic.net/yqoiy.png When using the sendconfirm() function, it encounters confusion with the date variable while trying to send an email. https://i.sstatic.net/LitEM.png https://i.sstatic.net/8jBd8.png Despite searching on Google for solutio ...

pythonhtmlbottle

Develop a reusable block of Vue template when creating a new component

There are times when I find myself needing to repeat certain sections of HTML code in my Template just to keep it DRY. However, creating a new component and passing multiple props and dynamic data seems like too much work. Is there a simpler way to define ...

htmltemplatesvue.jsdryextends

Having trouble getting basic JavaScript function to conceal a div element?

Looking to expand my knowledge in JavaScript and would greatly appreciate any assistance as I navigate this new world of learning. Despite exploring various resources on this site and trying out suggestions from other users, none have addressed my specific ...

javascriptjqueryhtml

Utilize Angular 17 to populate the date field in an edit form with saved data

I have a situation in my form where the date gets saved but it doesn't show up when I try to edit the form. Here is the JSON data: "checkOut": { "runDate": "2024-07-05T09:42:00.000Z", } The form input field looks li ...

javascripthtmlangulardatetimejava-time

Utilizing a server for seamless communication between a mobile device and a website

Exploring a simple setup idea here: Imagine having a mobile app with a page that contains 4 lines of content (utilizing phonegap for development). The plan is to have a web page where data for those 4 lines can be inputted. Once the information is submitt ...

javascriptphphtmlajax

Tips on extracting the image URL from a canvas element using Selenium in Java and leveraging JavascriptExecutor

My main objective is to extract the image URL from a canvas container. Here is what I have attempted: JavascriptExecutor jse = (JavascriptExecutor) driver; Object imageURL = jse.executeScript("arguments[0].toDataURL('image/png');", canvas); Un ...

javascriptjavahtmlseleniumcanvas

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

htmlcss

The class "slick" in <col class="slick"> does not add any styling or effects

My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for ...

htmlcsshtml-tablecol

Having trouble with the toggle button on the Bootstrap 5 navbar?

I am facing an issue with my HTML code where the toggle button does not display properly when I resize the browser screen. Upon clicking on it, the navigation bar items do not show at all. Here is a screenshot of my website <html> <head> ...

javascripthtmljquerycssbootstrap-5

The asp.net ajax control toolkit combobox encounters display issues when positioned in a fieldset with a relative style setting

I have a situation where an ASP.net ajax control toolkit combo box is placed within a field set with the style of position: relative. The entire setup is embedded in a simple table (let's not dwell on the use of tables for layout, I acknowledge it&apo ...

asp.netcssasp.net-ajaxajaxcontroltoolkit

Using JQuery to append an additional column to an HTML table at the end, determined by array information

I've been experimenting with how to enhance an html table by adding a new column of data. The process involves clicking a button, extracting the existing data column in the table, storing it in an array, performing calculations on it, and then display ...

javascriptjqueryhtmlarrays

Is there a way to convert inline styling to CSS using Material-ui within a React component?

In my development work with React, I initially utilized inline styling to customize the appearance of material-UI components. However, I have come to realize that utilizing CSS provides a more structured and efficient approach to styling components. Despit ...

cssreactjsmaterial-ui

Tips on incorporating inline CSS within master pages

I am facing a dilemma with my master page that includes an external CSS file in the header. While most of the pages have the same height, only one page needs to be longer. Instead of creating a new master page or modifying the existing CSS file entirely, ...

htmlasp.netcssmaster-pages

Apply design to a dynamically generated JavaScript id using Stylus

Currently, I am utilizing a jquery datepicker widget, and my goal is to customize the CSS for its input field. However, it seems that the id assigned to that field is dynamically generated upon page load: <input type="text" id="dp1382434269539" style= ...

javascripthtmlcssjquery-uistylus

Tips for implementing cacheable JSON in HTML

Is there a way to access the data stored in an HTML5 file, specifically in the header section like this: <script type="application/json" src="data.json"> Many have recommended using $.get("data.json"), but that requires loading the data each time. ...

javascriptjsonhtmlperformance

Stop hyperlinks from automatically opening in a new tab or window

I'm having trouble with my website links opening in new tabs. Even after changing the attributes to _self, it still doesn't work. Can someone please review my code below and provide a solution? Feel free to ask for more clarification if needed. ...

javascripthtmlcss

How can we integrate this icon/font plugin in CSS/JavaScript?

Check out the live demonstration on Jsfiddle http://jsfiddle.net/hc046u9u/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materializ ...

javascriptjqueryhtmlcssfonts

The controls for the HTML audio component are missing the download option on Safari

In my React application, I've declared an audio component with controls like the following: <audio controls> <source src={url} /> </audio> While this setup works perfectly in most browsers, it seems to have a bug when used in Safa ...

htmlreactjssafari

What is the method for activating or deactivating an <input> range with a <label> text?

I want the range to automatically switch between minimum and maximum values when I click on the label. Can this be achieved with just HTML and CSS or will I need some JS? Below is the code snippet I am working with: <label> This is the label ...

javascripthtmlinputlabel

Creating consistent image sizes using Bootstrap or pure CSS styling

I've been attempting to create 6 images that are all responsive and the same size. I've tried using just CSS and also tried using bootstrap cards, but I can't seem to achieve the desired result. I've experimented with flexbox, grids, s ...

cssimagebootstrap-5responsivesizing