Html Question posted in
Some basic documentation can be found here.

Html – How to add horizontal scroll to a flex container in a Bootstrap navigation menu?

I have a Bootstrap navigation menu with a flex container (). I want to enable horizontal scrolling for the menu items when they exceed the container width. I have applied the following CSS style to the container:

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

However, the horizontal scroll doesn’t seem to be working as expected. The menu items still wrap to the next line instead of providing a horizontal scroll.

Here 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>
Tags:

2

Answers


  1. 0

    Set flex-wrap: nowrap to prevent menu items from wrapping to the next line, and use overflow-x: auto to enable horizontal scrolling if the item exceeds the width of the container.

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

.nav li {
    margin-right: 10px;
}
    Login or Signup to reply.
  2. 0

    Give a specific width to those you want to show the navigation menu on the entire screen, and then get horizontal scrolling as per your requirement.

    .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>

    Here you can change the value for the max-width as per your requirement to show menu on the screen and other is scroll.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search