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

Error: Incorrect data input in Django calendar form

I have a DateForm class defined in my form.py file: class DateForm(forms.Form): date = forms.DateTimeField( input_formats=['%m/%d/%Y %H:%M'], widget=forms.DateTimeInput(attrs={ 'class': 'form-control dateti ...

htmldjango

"Effortless CSS Formatting in VS Code - A Guide to Automatic Styling

Recently started using VS code and I'm on the lookout for a solution to automatically format CSS whenever I save my work. Strangely, my searches haven't led me to any reliable extensions or clear guides on how to achieve auto formatting in VS cod ...

cssvisual-studio-codeautoformatting

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

htmlcssimagetwitter-bootstrap

Animation event in CSS3 fails to trigger on Firefox browser

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

javascriptcssanimationfirefoxdom-events

Ensure consistency in CSS3 background color transitions

There are multiple elements on the webpage with background transitions that change from one color to another: @-moz-keyframes backgroundTransition /* Firefox */ { 0% {background-color:#ff7b7b;} 33% {background-color:#7fceff;} 66% {backgr ...

javascriptjqueryhtmlcss

Customizing the appearance of Jquery UI Accordion Headers

Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling. My setup i ...

javascriptjqueryhtmlcssjquery-ui

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...

javascriptjqueryhtmlcsshtml-rendering

Is there a way to modify the standard width of semantic-ui sidebars?

I'm trying to adjust the width of semantic-ui sidebars, which are originally 275px wide. Where should I include the css/js code to make them wider or narrower? Here is their default code: .ui.sidebar { width: 275px!important; margin-left: -275 ...

htmlcsssemantic-ui

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

javascriptjqueryhtmlcss

What is the best way to reveal or conceal a div element on mouseover with jQuery?

Currently, I have a table with the following structure. <table> <tr> <td id="divOne">div one</td> <td id="divOne">2222</td> </tr> <tr> <td id="divOne">d ...

jqueryhtml

Is it possible to have a PHP variable embedded within an HTML link tag?

<?php $message = ' <a href="' . $link . '">here</a> '; ?> My goal is to include a clickable link in the $message variable for use in the mail() function. However, despite setting $link with the desired link string, it ...

phphtml

Limit text to two lines inside a cell in a table

Apologies for not providing any evidence of my own efforts. I'm looking to wrap text in a table cell, but limit it to just 2 lines. Expanding the width is not possible. Any suggestions on how to achieve this? ...

jqueryhtmlcss

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

Creating a clickable navigation menu item with a clickable caret located on the same line

I've been developing a solution using Twitter Bootstrap to create a main navigation menu that expands upon hover on desktop, while the menu expands when clicking the caret on mobile (caret hidden on desktop). Additionally, I aimed to make the top-leve ...

csstwitter-bootstrap

Mastering the art of calculating the width for a responsive scroll menu

I found a useful tutorial on building a scrolling menu for smaller screen sizes. You can check it out here. However, I encountered an issue when trying to add a border width element. Whenever I define the width, it overrides the scrolling: auto; element. ...

htmlcss

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

javascriptjqueryhtml

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...

cssreactjsmaterial-uicss-grid

What is the best method to adjust the width of the <option> tag within the <select> tag using CSS?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="s ...

htmlcsshtml-select

The Google map is not appearing when placed within the "row" class

My goal is to showcase Google Maps on my website, and every time I try to do so using the following code: <div class="large-12 columns" id="map-canvas"></div> The map displays perfectly and works as expected. However, when I nest this div wi ...

htmlcssgoogle-mapszurb-foundation

Sneaky spam and ads embedded within Joomla template

Today, while examining the source code of a Joomla site I am developing, I stumbled upon some hidden links that seem to be spam. I have spent an hour searching through various template files but have been unable to locate them. The hidden links in questio ...

phpjavascripthtmlcssjoomla