Strange arrangement of items in navbar - Using BOOTSTRAP 4

I'm currently experimenting with BOOTSTRAP 4 and the navbar, but the output on my webpage doesn't match what I want to achieve.

https://i.sstatic.net/FnGlv.png

What I want to achieve is shown in the following link:

https://i.sstatic.net/oelsv.png

Here's the code I'm using:

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


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

I've attempted to use the list-inline class to inline the list items, but it's not working as expected. Can you please provide assistance? Thank you.

htmltwitter-bootstrapcssflexboxbootstrap-4

Answer №1

There seem to be some issues with the Navbar structure as it doesn't follow the typical Bootstrap 4 Navbar format...

  • To maintain a horizontal navbar at all screen widths, use flex-row

    <div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h4 class="text-white">Collapsed content</h4>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>
    <nav class="navbar navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="\">
                    <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp; CVT</h5>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto flex-row">
            <li class="nav-item active">
                <a class="nav-link px-2" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-2" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
            </li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

Answer №2

Make sure to include the navbar-expand attribute within your <nav> tag, such as navbar-expand-md. This is important for responsive collapsing and color scheme classes, as mentioned in the documentation:

According to the docs, Navbars must be wrapped inside a .navbar with the .navbar-expand{-sm|-md|-lg|-xl} classes for proper responsiveness and color customization.

Answer №3

The alignment of the ul elements has been set to column using the flex-direction property. To display the items of the second ul next to each other, change the flex-direction to row:

ul.ml-auto {
  flex-direction: row;
}

ul.ml-auto li {
  margin-left: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

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

Tips for transferring variables as arguments in javascript

Currently, I am immersed in a test project aimed at expanding my knowledge of web development. Unexpectedly, I have encountered an issue that has left me puzzled on how to proceed. Within this project, there exists a table consisting of 11 cells. While 9 ...

javascriptjqueryhtmlfunctionparameters

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...

javascriptpythonhtmlflask

Utilize a class within a Framer Motion element to incorporate animations or set initial properties

Is there a way to apply a class using Framer Motion tag in the animate and initial props? Here's an example: <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div>yo</div> & ...

cssreactjsnext.jsframer-motion

Tips on how to personalize the print layout of an Angular 4 page when pressing ctrl+p

I am working on an angular4 app and I encountered an issue when trying to customize the print page view by pressing ctrl+p in the browser. The page that needs to be printed contains only Angular components, and my attempts to modify the print view using ...

angularcssangular5

Navigating Checkbox in Active Choice Reactive Reference Parameter on Jenkins

I attempted to configure an active choice reactive reference parameter using the instructions outlined in this guide: Here is the code for the reactive reference parameter: service_tier_map = [ "web": [ ["service_name": "use ...

htmljenkinscheckboxjenkins-plugins

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Need help with a JSF Primefaces project using the omega theme. The selectOneMenu dropdowns are not displaying correctly (missing line). Current look: https://i.stack.imgur.com/vF4ms.png Expected look: https://i.stack.imgur.com/hXsIB.png Any suggestion ...

cssjsfprimefacesselectonemenu

Unable to assign a basic HTML class to a Blazor component

Upon attempting to implement the following code in my .NET 5 Blazor project within a .razor file: <SignedLabel class="some-css-class" Price=123 Currency=Currency.Usd /> I encountered an issue where Blazor interpreted the class attribute as ...

htmlrazorblazor

I have come to realize that in my creation, my method does not function flawlessly as

I'm currently experimenting with creating a simple code using vue.js and d3.js. The goal is to plot some charts within the code, so I am attempting to allocate space for the charts by defining a method('add_svg') and executing the method in ...

cssnode.jsvue.jsd3.js

Show additional links beneath the main homepage URL in search engine result pages

Seeking a way to optimize search engine results to display sub-links under the main homepage of a website. Attached is a screenshot illustrating the desired outcome when searching for a particular term. Appreciate any insights or solutions on achieving thi ...

javascripthtmlseo

What could be causing the read-only error in my presentation?

My website has always had a small slider that worked perfectly, but now an error message keeps popping up: Error: "myIndex" is read-only This is the JavaScript code in question: const myIndex = 0; carousel(); function carousel() { let i; const x = ...

javascripthtmlecmascript-6syntax-errorreadonly

Manipulate a table using Jquery's find() method to insert a cell populated with information from an array using before()

My current challenge involves inserting a column of cells with data from an array. Despite attempting to use a for loop, all the cells end up displaying the same data from the array. What I really want is for each new cell to show 'row_header1', ...

javascripthtmljquery

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

javascriptjqueryhtmlundefined

Attempting to attach a particular image, but it consistently ends up linking to different images instead

I am having an issue with linking an image in my footer. Every time I link one image, the link seems to affect all the other widgets in the footer. Is there a way to prevent this from happening? Visit my website Below is the code I used to create a clic ...

htmlcsswordpresshyperlink

Flawless 2D mouse selection using Canvas for pixel-perfect accuracy

Currently, I am developing a 2D game in HTML5 using Canvas that requires precise detection of mouse click and hover events. The main challenges I am facing include the need for pixel-perfect detections, working with non-rectangular objects such as houses a ...

javascripthtmlcanvas

What is the best way to transfer form data stored locally to a Django view and then store it in the database?

Is there a way to transfer form data from an offline website to a Django view for database storage? I want to fill out a form, save it in local storage, and then upload the data to the database when I reconnect to the internet. Is there a tutorial or can ...

jquerypythonajaxdjangohtml

The hyperlink within the dropdown menu in HTML code is malfunctioning

I'm currently working on my personal website using HTML and CSS with textedit. I've successfully created functional links for the main navigation menu headings, but I'm encountering issues with the dropdown options. Whenever I try to click o ...

htmlcsshyperlinkdropdown

How can I hide or remove the pesky three dots "..." from appearing in any HTML elements?

While working on a project in VueJS, I've noticed that whenever I add a new class to an HTML tag, it displays as class="..." This is something that bothers me, and I'm not sure if it's due to a recent extension I installed or if i ...

htmlvue.jsvisual-studio-extensions

transforming a table into a stylized CSS design

Seeking assistance in converting a table into CSS as I am new to CSS: <table dir="ltr" width="500" border="0" align="center"> <caption><font face="Helvetica">Movies</font></caption> <colgroup width="50%" /> ...

htmlcss

In making reference to a particular subpage within a parent page

My website is designed with all inner pages linked to one master file. I'm looking to change the title font size on just one specific page, without affecting the rest of the pages that use the master file. Is there a way to target a specific page titl ...

javascriptcssasp.net

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

My goal is to implement a filter in my AngularJS code that will filter data based on selected checkboxes. If no checkbox is selected, all results should be displayed without any filtering. Currently, the issue I am facing is that the data is only displayed ...

javascripthtmlangularjsfilter