Ways to incorporate horizontal scrolling into a flex container within a Bootstrap navigation bar

I am encountering an issue with my Bootstrap navigation menu that uses a flex container (). The goal is to have horizontal scrolling for the menu items when they surpass the width of the container. I have implemented the following CSS style on the container:

.nav {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    width: 100%;
}

Despite applying this style, the expected horizontal scroll behavior is not functioning properly. Instead of providing a horizontal scroll, the menu items are still wrapping onto the next line.

Below is the HTML code for my navigation menu:

<ul class="nav nav-pills tab-listing" id="pills-tab" role="tablist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4<li>
</ul>
htmlcssbootstrap-5

Answer №1

To ensure that menu items do not wrap to the next line, apply the CSS property flex-wrap: nowrap. In cases where an item exceeds the width of its container, you can utilize overflow-x: auto to enable horizontal scrolling functionality.

.nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
}

.nav li {
    margin-right: 10px;
}

Answer №2

Set a specific width for those elements where you want the navigation menu to span the entire screen, and then enable horizontal scrolling as needed.

.nav {
    display: flex;
    overflow-x: auto;
    width: 100%;
    padding: 0;
    max-width: 500px;
    white-space: nowrap;
}
<ul class="nav nav-pills tab-listing" id="pills-tab" role="tablist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4<li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8<li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12<li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
</ul>

You can adjust the value of max-width according to your needs to display the menu on the screen with scrolling functionality.

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

Creating Functional Tabs Using CSS and JavaScript

I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today ta ...

javascriptjqueryhtmlcss

It seems that FireFox does not fully support IFrame Data URIs

Whenever I attempt to load a PDF Data URI into an iframe (for example, src="data:application/pdf;base64,...") in FireFox (version 18.0.2 [latest release], on OSX), it ends up triggering a download window instead. Just take a look at the website JSPDF.com ...

htmlfirefoxiframe

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

What is the best way to reverse the order of echo statements in PHP, so that they

A project I was working on involved creating a blog using PHP. Here is the code I used to submit posts into the database: <form method="POST" action="makePost.php"> <input autocomplete="off" type="text" name="title"> <textarea name= ...

phphtml

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

javascriptjqueryhtmljquery-mobilenavigation

Maximizing the efficiency of Java Script code

I am struggling with optimizing this JavaScript code that adds and removes classes based on the presence of a specific class in the next rows of a table. Can anyone provide some guidance on how to make this code more efficient? $(".showTR").click(functi ...

javascripthtmlcss

Items are overflowing the flex container, exceeding its boundaries

I've experimented with the width property, flex, flex-basis, and flex-shrink, but so far nothing seems to be working. I can't seem to pinpoint where the mistake lies in the code. I wanted to include the code snippet here, but it's throwing ...

htmlcssflexbox

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

javascripthtmlcsssveltemapbox-gl-js

Specify the title attribute by using a language-based string

Can the title attribute content on an image be defined as a language string that can be overridden in a multilingual website? I am considering following this format: <img title="tooltip_mod".....> Creating a tooltip_mod INI file that defi ...

htmlimageattr

Steps for creating a sleek vertical slider with transitional effects using JavaScript and HTML

Take a look at my code snippet: <table> <tr> <td onclick="shownav()">Equations of Circle <div id="myDownnav" class="sidenav"> <a>General Info</a> <a>In Pola ...

javascripthtmljquerycss

Modify a specific field in a row of the table and save the updated value in a MySQL database

I have successfully retrieved data from a database and displayed it in a table. Now, my goal is to enable editing of a specific field within a row and save the updated value back into MySQL. Here is the code snippet that includes displaying the data in th ...

phpjqueryhtmlmysqli

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

javascripthtmlcss

using percentage and float to enforce overflow-x

I have a small structure of list items inside a container and I am trying to display horizontal overflow instead of vertical overflow. However, I am having trouble achieving this, possibly due to the properties like float and percentage that I am using. I ...

htmlcsscss-floatoverflowpercentage

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

htmlcssasp.net

Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

The elements E1, E2, E3, E4 are all part of the user interface (UI) and are intended to have a hover effect. Additionally, there is a background image included in the design. Currently, this is the progress made on the project: <div class="bg"> ...

htmlcss

Concealing columns in DataTables based on designated screen sizes

Issue I am facing a challenge with two DataTables — one with five columns and the other with four columns. My goal is to find a solution for hiding certain columns based on specific screen widths. Approaches I've Tested While resizing the browser ...

javascriptjquerycssdatatabledatatables

Is it possible to utilize the identical Thymeleaf fragment modal on a single page, albeit with varying parameters?

I'm experiencing an issue with my website where I have cards with different headlines and content. When I click on a card, a modal should open with the specific text from that card. However, the problem is that the parameters from the first card are a ...

htmlspring-bootthymeleafbootstrap-5

Harness the Power of HTML5 with Windows 8 AdControl

My setup for the Windows 8 AdControl looks like this: <div id="adControl" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: &a ...

htmlwindows-store-appswindows-store

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout