Options presented in a horizontal line for convenient and quick

I need help with making my menu items responsive so they stay in one line without overlapping as the screen size decreases.

Here is the code snippet I am currently using:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My menu</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4c9d4c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <style>

  </style>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-auto">
        <a>Main page</a>
      </div>
      <div class="col-auto">
        <a>Second page</a>
      </div>
      <div class="col-auto">
        <a>Third page</a>
      </div>
    </div>
  </div>
</body>

</html>

The issue can be seen in the image linked above.

htmlcssbootstrap-5

Answer №1

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My menu</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf0edf0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <style>
    .row {
      display: flex;
      flex-wrap: nowrap;
    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-auto">
        <a>Main page</a>
      </div>
      <div class="col-auto">
        <a>Second page</a>
      </div>
      <div class="col-auto">
        <a>Third page</a>
      </div>
    </div>
  </div>
</body>

</html>

When the screen size is small, the items will remain on one line and a scroll bar will be used for navigation.

The CSS has been modified to set display as flex and flex-wrap as no wrap.

These changes ensure that the menu items stay on a single line. If there are more items than can fit in the viewport, a horizontal scroll bar will appear, allowing users to scroll horizontally to view the remaining items.

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

Update the input type on the fly

Hey there, I've got a bit of an unusual question. I'm looking to create a form with fields that vary for each user, like a text input or a checkbox. I attempted using Angular to achieve this: <div ng-controller="myCtrl" ng-repeat="x in prova" ...

javascripthtmlangularjs

<v-time-picker> - issue with time selection

<v-time-picker> - Are you certain that the component was properly registered? If dealing with recursive components, remember to include the "name" option <div class="form-inline"> <label for="">Time</label> <v-time-pick ...

cssvue.jsvue-componenttimepicker

Issue with event.preventDefault() in Jquery not functioning as expected

My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...

javascriptjqueryhtmlcss

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

What is the best way to ensure that a child element remains fixed in place?

What's the best way to make a left side panel (grandchild) sticky in relation to the body, while allowing a navbar and main content to be scrollable? <div> <div>navbar (should scroll away)</div> <div> <div>side pa ...

csssticky

What is the reason for the lack of letter-spacing between a nested inline element and the next character that follows?

Upon reviewing the specifications for letter-spacing, it is evident that runs of atomic inlines (e.g. inline-block) are considered as a single character (http://www.w3.org/TR/css3-text/#letter-spacing): For letter-spacing purposes, each consecutive run ...

htmlcss

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs

Utilizing a hidden file-input, IE10 is able to transmit a FormData object via ajax

I'm encountering difficulties when trying to send a form that includes a display:none file-input via ajax. It works fine in Chrome (46.0.2490.71), but not in IE10 (10.0.9200.17492). I've tried various solutions without success, and it's cruc ...

javascriptajaxhtmlfile-uploadinternet-explorer-10

Ways to enlarge the diameter of the inner circle

I've implemented some CSS with JQuery, as seen in this JSFiddle. However, I'm having trouble increasing the width and height of the green circle to be slightly larger than the gray circle (referred to as the main circle) which is positioned at a ...

jqueryhtmlcss

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Struggling with integrating HTML Canvas within Vue.js

Currently, I am attempting to upload an image by utilizing HTML canvas. My decision to use canvas stems from the fact that I will be superimposing additional images based on the data received from the API, and this process seems more straightforward when u ...

javascripthtmlvue.jshtml5-canvas

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

javascriptphphtmlnode.jsexpress

Error: The specified element to insert before is not a direct descendant of this parent node

As I work on converting a jquery dragable script to plain javascript, I encountered an issue at the insertBefore point. The error message that pops up is: NotFoundError: Node.insertBefore: Child to insert before is not a child of this node. This particula ...

javascripthtml

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

htmlcssvideobackground

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

javascriptjqueryhtmlcssbutton

Having trouble with the automatic closing feature of Bootstrap drop down in React?

While using the drop button feature of Bootstrap, I have encountered a situation where it works fine when clicked on, but disabling it by clicking outside using autoClose='outside' does not seem to work as expected. When I click on my hamburge ...

javascriptreactjsonclickbootstrap-5auto-close

Maintain the state of the toggle div after page refresh or modification

In this scenario, I am looking to ensure that my div remains open even if the page is changed or refreshed. Below is the HTML and JavaScript code provided: You can view the working code here: http://jsfiddle.net/wasimkazi/fauNg/1/ $(".widget2").hide( ...

javascripthtmlcss

Steps for showcasing stars (1-5) based on the data stored in the database

I recently completed a project where I created a user achievement page that displays their progress. Within the page, there is a table containing the user's level. The table structure looks like this: Users( id, username, password, sum_score, level) ...

phphtmlcss

Can I specify which modal or component will appear when I click on a component?

Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...

javascripthtmlangularangular-components

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

javascripthtml