Ways to move to the next line following the navigation bar text

Below is the code snippet that I am working with:

<nav class="navbar navbar-expand-sm  navbar-dark  ">
    <div class="container-fluid">

        <a class="navbar-brand" href="#">LOREM IPSUM</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav  ml-auto">
                <p class="navbar-text">lorem Ipsum Dolor</p>
                <li class="nav-item ">
                    <a class="nav-link" href="#">LOREM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">IPSUM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DOLOR</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

This code generates the following output: https://i.sstatic.net/2LeuS.png

I am trying to display all my nav links in separate lines after "lorem ipsum dolor". I have attempted using display:block, but it hasn't been successful. Any assistance on this matter would be greatly appreciated!

cssbootstrap-4

Answer №1

If you want to showcase navigation links on a separate line and create a vertical navbar, simply eliminate the .navbar-expand-sm class from the nav element.

<nav class="navbar navbar-dark">
    <div class="container-fluid">

        <a class="navbar-brand" href="#">LOREM IPSUM</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav  ml-auto">
                <p class="navbar-text">lorem Ipsum Dolor</p>
                <li class="nav-item ">
                    <a class="nav-link" href="#">LOREM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">IPSUM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DOLOR</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

Answer №2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e2f8e3f8e5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<nav class="navbar navbar-dark">
    <div class="container-fluid">

        <a class="navbar-brand" href="#">LOREM IPSUM</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse flex-wrap" id="collapsibleNavbar">
        <div class="w-100"><p class="navbar-text">lorem Ipsum Dolor</p></div>
            <ul class="navbar-nav ml-auto">
                
                <li class="nav-item ">
                    <a class="nav-link" href="#">LOREM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">IPSUM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DOLOR</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

Answer №3

None of the solutions provided were effective. The key was to create a separate div and use float:right to position the navbar text and collapsible navbar to the right side. Here is the updated code:

<nav class="navbar navbar-expand-sm  navbar-dark  ">
                    <div class="container-fluid">
                     
                        <a class="navbar-brand" href="#">LOREM IPSUM</a>
                     
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                            <span class="navbar-toggler-icon"></span>
  </button>
  <div class="float-right ">
      <p class="navbar-text">Lorem Ipsum Dolor</p>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
                      <ul class="navbar-nav  ">
                       
                        <li class="nav-item ">
                            <a class="nav-link" href="#">LOREM</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">IPSUM</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">DOLOR</a>
                          </li>
                        
                      </ul>
                    </div>
  </div>
                    </div>
                  </nav>

Updated layout can be viewed here.

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

Prevent touching the pseudo content of an element

My issue involves a toggle button component where I have utilized the ::before pseudo class to add text. The problem arises when clicking on the text within the toggle button causes the button's state to change. How can this be prevented? Here is the ...

htmlcssangularionic2

Numerous CSS class attributes

I have been experimenting with creating my own custom progress bar using CSS. While the HTML5 <progress value="10" max="100"></progress> element could work, I prefer to create it from scratch. In my CSS code, I have defined the .progressbar c ...

htmlcss

Arranging items to be flush at the base of several columns

I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...

htmlcsspositioningmultiple-columns

Please provide an explanation for the statement "document.styleSheets[0].cssRules[0].style;"

I'm seeking an explanation for this block of code: document.styleSheets[0].cssRules[0].style; It would be helpful if you could use the following code as a reference: * { padding: 0; margin: 0; box-sizing: border-box; font-family:&apos ...

css

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

When the caret triangle is upside down, it indicates that a drop-down menu is available even when the

I am facing an issue with a dropdown list where the triangle indicator is incorrectly displayed: https://i.stack.imgur.com/L4NBW.png Both images show that the arrows are in reverse direction, and I am struggling to identify the cause of this problem. He ...

javascriptjqueryhtmlcss

What is the best way to apply overlays to customize a specific part of a single character while also accommodating dynamic width adjustments?

Query Is it feasible to style a specific portion of a single character? Interpretation You cannot apply CSS attributes to parts of characters. However, if you wish to style only a particular section of a character, there is currently no standardized met ...

htmlcssoverlay

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

IE6 disrupts stored layouts

I've encountered a strange issue with my design in IE6. It loads perfectly at first, but after reloading it a couple of times, everything suddenly collapses. The strange part is that when I upload an updated version, it fixes the issue, only to break ...

htmlcsslayoutinternet-explorer-6

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

What is the best way to horizontally align Bulma's level items on smaller screens?

My website's footer features a level layout with left and right sections that follow the guidelines provided in theBulma docs. Everything looks good on larger screens. However, on smaller screens, all items in the right section are stacked vertically ...

cssbulma

Deactivate Link Using CSS while Allowing Title to be Functional

Is there a way to enable the link in CSS while still showing the title? Take a look at my code: CSS and HTML Code: .disabledLink { pointer-events: none; opacity: 0.6; cursor: default; } <a href="www.google.com" class="disableLink" title="M ...

htmlcss

Adjustable div with varying positions and dimensions

Hey there! I'm currently working on creating a page with a variable number of resizable divs. These divs can be resized horizontally using Bootstrap's col classes (col-2 through col-12), and vertically with no limits. Additionally, new divs can b ...

cssbootstrap-4gridresizeposition

Center both vertically and horizontally in Bootstrap UI Modal

I'm attempting to create a Bootstrap UI Modal that is centered both vertically and horizontally. While I found this solution that successfully centers the modal vertically, it loses its horizontal centering when applied to my own template with 800px ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Stop right-floating elements from switching positions

Every time I float two elements to the right, they end up getting swapped. This issue doesn't seem to happen with left floated elements and occurs consistently across all browsers. For example: CODE: <style type="text/css"> .right { ...

htmlcsscss-float

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

jquerycssslideshow

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

javascriptjquerycssoverlay

Bootstrap 4 - positioning link element to align with heading in card header

I'm currently utilizing Bootstrap 4+ to design a card that features a collapsible card-body, triggered by a link located in the card-header. <div class="card text-left mb-3 mt-3"> <div class="card-header p-3"> <h4>Where should ...

htmlcsstwitter-bootstrapbootstrap-4

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...

jqueryasp.netcsshtml