Ensure Navbar elements remain on a single line

I need my Bootstrap Navbar elements to remain on a single line regardless of the screen width.

Although I have searched for a solution to this issue numerous times and tried different approaches, none have proven effective in my case.

Below is the code snippet I am currently using:

#head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

The desired appearance of my Navbar on small screens should be like this:

https://i.sstatic.net/UiHsD.jpg
and not like this:

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

htmlcsstwitter-bootstrap

Answer №1

To make your list items display inline, simply add the CSS property display: inline-block; to your li elements.

.nav>li {
    display: inline-block;
}

If you want to display both unordered lists (ul) in the same line, apply the same style to the ul elements as well. Check out this jsfiddle example for inline ul.

Keep in mind that in Firefox, there may be a breakpoint at 768px where you should remove the white-space: nowrap property.

#head-navbar {
  white-space: normal;
}

Just a quick note - use .pull-right instead of .navbar-right to float an element to the right side of the page.

Answer №2

The reason for this is the implementation of media queries, which allow changes in style on smaller screens. To achieve this, simply include the following code:

.menu-list {
    float: right;
    margin: 0;
}
.menu-list > item {
    float: right;
}

Answer №3

Here is the CSS code that should help with your issue:

#head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  width:initial;
  float:left;
  white-space: nowrap;
}
.nav { 
  display: inline-block;
}

@media screen and (max-width:768px)
{
  .nav.navbar-nav.pull-right { float:none !important; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

Answer №4

.pull-right{
  float:right;
  }
#head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  width:initial;
  float:left;
  white-space: nowrap;
}
.nav { 
  display: inline-block;
}

@media screen and (max-width:768px)
{
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

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

Changing the size of an input field in Bootstrap 4 by utilizing the input-group-append class

Currently, I am working on setting up a pay rate feature that includes two input boxes for numbers. However, I am facing an issue where the input boxes are stretching too much, causing the cents field to drop down to the next line. The Maxlength property ...

htmlcssinputbootstrap-4

Manage a frame directly from the parent page

I am faced with a situation where I have a web page with two textboxes and a button. Unfortunately, I am unable to alter the contents of this page in any way. My goal is to find a way to automatically populate the first textbox with some text when the pag ...

javascriptjqueryhtmliframe

JavaScript decimal precision function malfunctioning with currency format conversion

My current snippet works perfectly with the currency format 249.00, but I need to adapt it for a site that uses euros with pricing in the format 249,00. When I make this change, the total calculation goes haywire and shows as 29.900,00. Can someone advise ...

javascripthtml

Error code 2 in Phonegap 2.2.0 iOS file transfer issue

saricsarda2[326:15b03] Executing multiple tasks -> Device: YES, App: YES saricsarda2[326:15b03] -[CDVFileTransfer download:] [Line 313] File Transfer is currently downloading... saricsarda2[326:15b03] File Transfer has been completed with response code ...

iosxcodehtmlcordova

Are there any plans in the works to create a widget similar to UserVoice for our project?

I am looking to create a unique widget similar to uservoice that can be positioned on either the left or right side of the page. When a user clicks on the widget, a dialog box will appear where they can access all the features we offer. Are there any exis ...

javascriptjqueryhtml

What is the best way to manage a download link that necessitates an Authorization token when using Angular?

I'm currently working with a REST API in combination with Angular. The issue I'm facing is related to post objects that include file attachments. Every time a user wants to download a file attachment, they must make a call to /get/file/{id}, but ...

javascriptangularjshtmldownload

Crosschecking form password with MySQL database for verification

As a newcomer to PHP, I am facing challenges while setting up a login system. My struggle lies in verifying if the password entered in a form matches the corresponding email stored in a MySQL database (considering the email address was also submitted on th ...

phphtmlmysqldatabaseauthentication

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Is there a way to input password values continuously using a JavaScript onclick function into a password field? I have two images, one 'Blue' and one 'Red', that trigger an onclick function with the following values: Blue= w3! Red= T4 ...

phpjavascripthtmlcss

Why does "height: auto;" not function properly when I implement "float:left"?

I have set up three responsive columns and now I want to add a wrapping div for them. Although I have created the wrap div, it seems to only work with pixel values. I would prefer to use percentages or auto as I am aiming for a responsive layout. For exa ...

htmlcss

Tips for effectively utilizing the container class in bootstrap

As I work on developing a responsive website, I am utilizing Bootstrap 4 to create a navigation bar. The question arises, does the version of Bootstrap truly make a difference in this case? Furthermore, is the navigation bar essentially the most prominent ...

twitter-bootstrapbootstrap-4

A beginner's guide to implementing the GET method with Express.js

Hey there, I have a folder named "vehicles" on my PC and I'm looking to set up a localhost to generate links for each image in that folder. For example: localhost:800/vehicle/ So when I click on the link, it should display the image. However, bein ...

htmlnode.jsexpress

Incorporate zoom feature into the jQuery polaroid gallery

Currently, I am utilizing a jQuery and CSS3 photo gallery found on this website. My goal is to allow the images to enlarge when clicked, however, the method provided by the author isn't very clear to me, as I'm not an expert in jQuery. I attempt ...

javascriptjquerycssphoto

The wrap() method in jQuery clones elements multiple times

I have created a simple function that wraps a div tag inside another div tag when the browser window exceeds a certain width of x pixels. However, I've encountered a strange bug when resizing the page more than once. Let me share with you the jQuery ...

javascriptjqueryhtml

Designing draggable tags similar to those on LinkedIn, incorporating a parent div element containing an SVG image and text

Lately, I've been exploring the world of CSS and Angular. Can someone give me a jumpstart on using CSS to design an element like the one shown in this https://i.stack.imgur.com/vcR3Z.png image? Essentially, this outer tag consists of a div element th ...

htmlcssangularjs

Incorporating a weather widget into the information window of a Google map

I am having some trouble trying to integrate a weather widget from into an Info Window on a Google map. The goal is to have the weather widget open in the Info Window when a marker on the map is clicked. The code snippet for embedding the weather widget ...

javascripthtmlgoogle-mapswidgetinfowindow

Generating unique spreadsheet identifiers in an HTML file

When it comes to displaying a chart using Google Sheets, I encounter an issue where the data is sourced from the same spreadsheet: function updateChart() { var ui = HtmlService.createHtmlOutputFromFile('ChartLine').setWidth(1350).setHeight(550) ...

javascripthtmlgoogle-apps-scriptgoogle-visualization

Code snippet for adding a div element with an embedded image using JavaScript

I am attempting to create a function that generates three div elements, each containing an image, and then appends them to the body using a for loop. As a beginner in JavaScript, I am struggling with this task. Can anyone please provide guidance on what ...

javascripthtmlfunction

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

I have come across the following HTML: <div class="calculator-section"> <p> <span class="x"></span> <span class="amount">30</span> </p> <p> <span class="y"></span ...

javascriptjqueryhtmlcss

Materialize CSS is throwing an error: 'velocity is not a function'

Encountering an issue with Materialize CSS. A JavaScript error appears 'I('.velocity is not a function', for certain actions. For instance, clicking the collapse icon on the sidenav results in e.velocity is not a function error. Similarly, u ...

javascripthtmlcssmaterialize

Modify website styling using JavaScript to edit external CSS/SCSS files

I am looking to 'modify' a file that is stored on my server, for example: <link rel="stylesheet" href="css/plugin.scss"> Not only that, but I also want to specifically edit a line within the SASS file. In SASS, you can declare variables i ...

javascriptjquerycsssass