Separate the navbar-brand and nav-items onto separate lines within the Bootstrap 4 navbar

I would like to arrange the navbar-brand and nav-items on separate rows.

Put the navbar brand on the first row and the navigation items on the second row

Existing code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

To create the intended effect, follow these steps:

  1. Include the flex-column class in the navbar code snippet below. (This will transform the navbar into a flex-column layout, allowing for the desired stacking behavior.)

  2. If you prefer to align items to the left instead of centering them, add the align-items-start class as well.

  3. To align the navbar-brand with the items, include the ml-2 class (margin-left: 2 units) to the navbar-brand element.

  4. To maintain normal behavior when the navbar collapses, make adjustments to two classes from the previous steps. For instance, if you are using navbar-expand-lg, change flex-column to 

    flex-lg-column</code to ensure that the flex-column layout is activated only on large screens and above. Similarly, replace the <code>ml-2
    class with ml-lg-2 to apply left margin changes specifically for larger screens while retaining the default setting on smaller screens.

Click "run code snippet" below and expand it to view the full page display:

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

<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 flex-lg-column align-items-start navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand ml-lg-2" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</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

Using callback functions with server.listen in Typescript and JavaScript

I'm puzzled why the following codes are not functioning in TypeScript. (They used to work perfectly fine in my previous JavaScript code!) http.createServer(app).listen(port, (err) => { # Do something }); However, this code works flawlessly (wi ...

javascriptnode.jstypescriptexpressserver

ng-repeat did not properly listen for changes in the radio box selection

Feeling a bit confused here. I'm trying to call a function on change and pass the obj to it. From what I understand, since it's bound to the selected obj, I should be able to just use ng-model. However, in this situation, nothing happens when I s ...

javascriptangularjs

Troubleshooting unexpected character error in jQuery Ajax call with ColdFusion 9: JSON parsing issue

I'm brand new to working with AJAX so please bear with me. I'm currently trying to retrieve data from a database using a cfc component with <cfquery> and then converting it to JSON using the serializeJSON(var) function. However, when I che ...

jqueryajaxcoldfusion

Arranging Icons to Coordinate with Text in a Line

I am working on a layout that features 7 icons with short links and descriptions underneath each. My goal is to have 4 icons displayed horizontally in one row, followed by 3 icons in the second row. While I have managed to set up the text and links as desi ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

javascriptjqueryhtmlcss

react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, ...

htmlcssreactjsimageslider

I keep trying to retrieve a specific property from an object, but every time I do, it returns as undefined

I'm currently employing Javascript within a React component. My goal is to retrieve a specific property from an object. If I log this object out to the console as shown below: console.log("Engine: ", this.Engine); The output looks like th ...

javascriptreactjsecmascript-6

Which is more effective: using jquery.live() or creating listeners as needed?

I am working on a page that displays news item titles. When you click on each title, it uses ajax to load the full news item along with a photo thumbnail. I would like to add a lightbox feature to the thumbnails so that users can view a larger version of t ...

jquery

Is it feasible to utilize the translate function twice on a single element?

Using Javascript, I successfully translated a circle from the center of the canvas to the upper left. Now, my aim is to create a function that randomly selects coordinates within the canvas and translates the object accordingly. However, I'm encounter ...

javascripthtmlcsscss-transforms

Is there a GSAP array for setting repeat delays?

Currently delving into GSAP (Greensock Animation Platform) during my free time and exploring its capabilities. I'm curious if it's possible to set up an array of values for a specific repeating element. Here's what my Tween currently looks l ...

javascriptarraysrepeatgsap

The status in the Network Tab indicates 'Pending' for Axios Request

I encountered some CORS errors when trying to fetch data from an API at https://api.data.io/api/v1 in my React app, so I decided to set up a proxy server. However, after setting up the proxy server, I noticed that no data was being returned when making re ...

javascriptnode.jsreactjsaxios

Is full support for CSS 3D transforms (preserve-3d) provided by IE11?

Creating a web app utilizing css 3d transforms, my goal is to have IE11 support if feasible. I am aware that IE10 does not endorse the preserve-3d value for the transform-style css attribute, however, there seems to be conflicting information regarding I ...

htmlcsscss-transformsinternet-explorer-11

Struggling to connect CSS and JavaScript files to index.html on Heroku while utilizing Node.js

Trying to set up a Tic Tac Toe game in my app.js file, but encountering some issues with linking files in index.html. app.set('port', (process.env.PORT || 5000)) //serve static files in the public directory app.use(express.static('public& ...

javascriptnode.jsexpressheroku

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

I am currently utilizing thymeleaf as my chosen template engine for a spring boot project. Here is the directory structure: src/main/ |- java | - UserAdministrationController.java |- resources | - static | - admin | - css ...

htmlcssspring-bootthymeleaf

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

I am currently facing an issue with my React codebase where I am attempting to create snapshot tests for a component. However, Jest is showing an error indicating that I am trying to destructure a non-iterable instance. Despite thoroughly reviewing the cod ...

javascriptreactjstestingjestjssnapshot

Jest test is unable to find the definition of Regexp

In the process of testing a module ./main.js with ./__tests__/main-test.js, I encountered an issue. One of the functions in ./main.js utilizes new Regexp(REGEX, 'g'). Upon running jest, an error message is displayed: ReferenceError: Regexp is n ...

javascriptregexreactjsbabeljsjestjs

Jquery AJAX autocomplete extension

Hey, I came across this amazing plugin that I think is the best so far and exactly what I need: jQuery Plugin: Tokenizing Autocomplete Text Entry However, when I tried to create my own PHP file with it, it doesn't seem to work. Here's my PHP fi ...

phpjsonjqueryjquery-plugins

The width of each column in this dataset is variable and unknown

I need to organize a varying number of items into columns. The sizes of both the items and container are unknown, as well as how many columns will fit or what width they should be. I want the browser to arrange the items in as many columns as possible with ...

htmljquerycss

Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders. .tg { border-collapse: collapse; border-spacing: 0; } .tg td { border-color: black; border-style: solid; border-width: 3px; font- ...

htmlcss

HTML and CSS: Expanding a Div Element Beyond its Container

Creating a web page involves using a PHP-based CMS to dynamically generate the content by fetching information from a database. However, a strange issue has arisen where the browser seems to be extending a div beyond its closing tag. Even though the closi ...

csshtmlstyling