What is the best way to ensure that a nav-item is the correct width to display its content in a single line?

I want to ensure that my nav-item elements have enough width to display their content on a single line, as currently the content is wrapping onto two lines:

Sample Code:

https://jsfiddle.net/tavyhkem/2/

    <ul class="navbar-nav mt-2 mt-lg-0">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <h5 class="no-margin-bottom">
                    <i class="fas fa-user"></i>
                    My Account
                </h5>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                <h5 class="no-margin-bottom">
                    <i class="fas fa-shopping-cart"></i>
                    Cart
                </h5>
            </a>
        </li>
    </ul>

Desired Outcome:

I am looking for "My Account" and "Cart" items to be adjusted in width so they can fit on one line.

Could this issue be related to my inline w-100 search bar?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Could my inline w-100 search bar be causing this issue?

Absolutely, the problem is related to your inline w-100 search bar but you can resolve it by adding the class text-nowrap to the elements that need to remain on a single line like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"><h2 class="no-margin-bottom">TITLE</h2></a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
        <form class="form-inline d-inline w-100 my-2 my-lg-0 mr-2">
            <div class="input-group">
                <input class="form-control" type="search">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
        <ul class="navbar-nav mt-2 mt-lg-0">
            <li class="nav-item text-nowrap" style="width: 158px;">
                <a class="nav-link" href="#">
                    <h5 class="no-margin-bottom">
                        <i class="fas fa-user"></i>
                        My Account
                    </h5>
                </a>
            </li>
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="#">
                    <h5 class="no-margin-bottom">
                        <i class="fas fa-shopping-cart"></i>
                        Cart
                    </h5>
                </a>
            </li>
        </ul>
    </div>
</nav>

The text-nowrap class exactly does what its name suggests - it prevents wrapping of text.

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

Issue with nullable integer validation displaying message when non-numeric values are entered

Currently, I am incorporating jQuery validation into my project, and here is the HTML code I am using: <input data-val="true" data-val-number="The field Weight must be a number." data-val-range="The field Weight must be between 1 and 750." data-val-ran ...

jqueryhtmlasp.netasp.net-mvcvalidation

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

Here's a simple case to reproduce the issue: <div style="display: inline-block; position: relative; border: 1px solid black;"> short <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; lef ...

htmlcssflexboxinternet-explorer-11

The Bootstrap Modal button refuses to close on the second attempt

After closing my modal once, I am unable to open it again and close it. What could be the issue with my code? Below is the code snippet: <div class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false ...

jqueryasp.net-mvcasp.net-coremodel-view-controllerbootstrap-4

I am trying to display an element upon hovering using Jquery, but unfortunately, despite recognizing the event, it refuses to function as expected

I've been searching for a solution to show a submenu on hover by removing the hidden class that is hiding it. Despite trying various approaches, including using CSS and JavaScript, I haven't been able to make it work. Here is the code snippet I h ...

javascripthtmljquerycss

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

Tips on snapping pictures using an html5 camera without encountering security prompts

Is there a way to capture an image from a webpage without triggering security warnings? The webpage where I need webcam functionality cannot be switched to HTTPS protocol. I have already installed root certificates and made them trusted, but still no succ ...

htmlwebcamprivacy

How about: "What about Using Percentage-Based Image Holders?"

I'm wondering if it's possible to use a placeholder with percentages instead of pixels. I know there's code that allows for pixel dimensions, but is there a way to use percentages? Currently, the code for the placeholder is img src="http://p ...

htmlcssimageplaceholderwireframe

How do I position an input box at the bottom of a split window using CSS?

I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this. Chec ...

css

Utilizing CSS in Angular to Conceal Background Images in the Project

CSS and HTML. Encountering an issue with the structure of my Angular project in the home.component.html file: <div id="homecontent"> <div class="imageslide"> <ng-image-slider [images]="imageObject" [imageSize]="{width: &apo ...

htmlcssangular

What is the best way to set the width of a fixed div based on its parent div's percentage width?

Having trouble setting a fixed div to be the same width as its parent element, which is itself size relative to another div. To clarify, here is a code snippet that demonstrates the issue: HTML <div class="grandparent"> <div class="parent" ...

htmlcsswidthfixed

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

javascripthtmljquerycss

Select a Date: Input for Date Selection

Is it possible to restrict the selection of certain days using HTML date input validation? Some booking websites have a feature where an interactive calendar only allows users to select specific dates for events, while others are greyed out and cannot be c ...

javascriptphpjqueryhtmldate

What could be causing my CSS not to update properly in the web browser?

During the process of coding my website, I have noticed a peculiar issue. Whenever I save my HTML and CSS documents and refresh my browser, I am able to see the changes in the HTML right away. However, the changes in the CSS do not seem to take effect imme ...

css

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

javascripthtmlcss

Images will only be displayed if the optional html parameter is included; otherwise, they will be hidden

In my parent component, there is an image displayed at a specific path (note: the image is already stored in my project). This path can optionally have additional parameters. If the For instance, The image is visible (image) when the HTML path is: ww ...

javascripthtmlcssimagereactjs

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

Finding dynamic elements with Selenium WebDriver is an essential skill for any automation tester

<div id="button" data-testid="widgetButton" class=" chat-closed mobile-size__large"> It seems there is an issue with locating elements that have special characters in their names. I'm attempting to click on a specific item, but I've tried ...

javahtmlseleniumselenium-webdriverselenium-ide

Adapt to screen size changes by transforming a single row into two separate rows

I am trying to create a two-column row with inputs: <div class="row first-row"> <div class="column col-6"> <div class="form-group"> <label for="usr" >Se ...

javascripthtmlcssmobileresponsive-design

Prevent fluctuations in container height + tips for aligning a list item at the bottom

In my jsFiddle demo here, I have implemented a vertical menu. Upon hovering on the icon, I would like the description of that menu to appear with a fade effect. Q1: However, during the fading transition, the text in the description wraps into a new line, ...

css

Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users ...

javascriptjqueryhtmlcssshow-hide