Guide on repositioning a navbar item as the first item when the hamburger menu is shown

Question

Guide on repositioning a navbar item as the first item when the hamburger menu is shown

I am currently in the process of constructing a new website using Bootstrap, and I have implemented a NavBar. On desktop and tablet screens, the NavBar appears as desired with links and a Search Box situated in the right corner:

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

However, on mobile devices, I find it inconvenient to have the search feature at the bottom of the menu:

https://i.sstatic.net/4fMni.png

To provide an example of my code, I have created a Fiddle:

https://jsfiddle.net/hpxgowa8/

Below is the code snippet for reference:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="javascript:void(0)">Gravity Now!</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Calculator</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Comparison</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
    </form>
  </div>
</nav>

I am seeking advice on how to reposition the Search Box as the first element when the hamburger menu is visible. Any suggestions would be greatly appreciated.

css twitter-bootstrap bootstrap-4 navbar

Answer 1

Answer №1

Using flexbox makes achieving this layout quite simple. By setting the navbar-collapse wrapper as a flex item, you have the ability to adjust the order of its contents:

.navbar-collapse {
    display: flex;
    flex-direction: column;
}

.form-inline {
    order: -1;
}

https://jsfiddle.net/dgz7h01w/

Answer 2

Using flexbox makes achieving this layout quite simple. By setting the navbar-collapse wrapper as a flex item, you have the ability to adjust the order of its contents:

.navbar-collapse {
    display: flex;
    flex-direction: column;
}

.form-inline {
    order: -1;
}

https://jsfiddle.net/dgz7h01w/

Answer 3

Answer №2

An effective grid solution is as follows:

To create a grid layout, use display: grid on the div. This will divide the div into two parts, with the first row set to 25% and the remaining to 75%, accommodating the list and form menu sections.

Utilize grid-row to specify that the search bar should be placed in row 1 and the list in row 2.

#navb  {
  display: grid;
  grid-template-rows: 25% 75%;
}

#navb > ul.navbar-nav {
  grid-row: 2;
}

#navb > form.form-inline.my-2.my-lg-0 {
  grid-row: 1;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="javascript:void(0)">Gravity Now!</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Calculator</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Comparison</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
    </form>
  </div>
</nav>

Enhance your CSS skills by mastering css-grids (alongside flex boxes). Verify compatibility for your project and dive deeper into grids by visiting this link and exploring more about grids here.

Answer 4

An effective grid solution is as follows:

To create a grid layout, use display: grid on the div. This will divide the div into two parts, with the first row set to 25% and the remaining to 75%, accommodating the list and form menu sections.

Utilize grid-row to specify that the search bar should be placed in row 1 and the list in row 2.

#navb  {
  display: grid;
  grid-template-rows: 25% 75%;
}

#navb > ul.navbar-nav {
  grid-row: 2;
}

#navb > form.form-inline.my-2.my-lg-0 {
  grid-row: 1;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="javascript:void(0)">Gravity Now!</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Calculator</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Comparison</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
    </form>
  </div>
</nav>

Enhance your CSS skills by mastering css-grids (alongside flex boxes). Verify compatibility for your project and dive deeper into grids by visiting this link and exploring more about grids here.

Guide on repositioning a navbar item as the first item when the hamburger menu is shown

Answer №1

Answer №2

Similar questions

The width of the table remains consistent

Is there a way for me to establish a maximum word count for a paragraph?

Guide to making an adaptive hamburger menu using Bootstrap

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Interactive vertical table headers and clickable cells

Guide on activating javascript code for form validation using php

Personalized 404 Error Page on Repl.it

What is the problem with locating elements in Selenium with Java?

Stop the selection of text within rt tags (furigana)

Is the "sizeContent" function in jQuery associated with CSS media queries?

Automatically change a text based on its location

Responsive CSS - reordering div elements

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

Disable the ability to close the dialog box by clicking

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

Using Three.js to generate a CSS3DObject containing an HTML iframe from a different origin results in an error

Tips for preventing Bootstrap 4 cards from extending to the far right side of the screen

Getting the title name with CSS selectors in Scrapy

Grid sidebar using tailwindcss

The disablement of the button is a result of concealed select elements