Positioning of the header that adapts and adjusts based

I created a header layout using bootstrap 4.5

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

<nav class="navbar navbar-expand-sm navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">
    <img src="logo.png">
</a>

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
    aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">

     <!-- Left -->
    <ul class="navbar-nav left-menu mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item3</a>
        </li>
    </ul>

    <!-- Right -->
    <ul class="navbar-nav ml-auto right-menu">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item6</a>
        </li>
    </ul>
</div>

For the tablet view, I want to rearrange the elements as shown in this design: https://i.sstatic.net/5fKHf.png

In order to achieve this, I am using a media query : @media (max-width: 991.98px) { ... } However, I need assistance on how to move the left menu (mr-auto) below the main menu. Thank you!

htmljquerycssbootstrap-4

Answer №1

For the desired effect, utilize Bootstrap's class order-X where X represents the order of the element.

In your current structure, consider setting an order for mobile and adjusting it for desktop view.
Alternatively, you can modify the markup to target only the desktop ordering.

Step 1:
Establish the order for each element

  • The logo should consistently be assigned as order-1
  • The left menu defaults to order-3 then changes to order-md-2 for desktop.
  • The right menu always maintains order-2.

Step 2:
Specify the width for the Left menu

  • Initially set to a width of 100 using col-12
  • Later adjust to auto-sizing with col-md-auto

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="navbar">
   <img src="//via.placeholder.com/150" class="order-1" alt="">
    <ul class="navbar-nav left-menu mr-auto order-3 order-md-2 col-12 col-md-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item3</a>
        </li>
    </ul>

    <!-- Right -->
    <ul class="navbar-nav ml-auto right-menu order-2">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item6</a>
        </li>
    </ul>
   </div>

Answer №2

Implement negative margin on right-menu within media queries.

@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar {
  flex-direction: column;
  align-items: end;
}

.navbar-collapse, .left-menu {
  width: 100%;
}

.right-menu {
  margin-top: -80px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<!-- Left -->
    <ul class="navbar-nav left-menu mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item3</a>
        </li>
    </ul>

    <!-- Right -->
    <ul class="navbar-nav ml-auto right-menu">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item6</a>
        </li>
    </ul>
  </div>
</nav>

Answer №3

  1. Implement a responsive design with two different navigation menus.

  2. Hide the first menu near the logo when the screen width is less than 991px and display the second menu below the logo.

  3. Switch to displaying the first menu and hiding the second menu using a reverse method.

  4. Utilize media queries to achieve this responsive navigation menu behavior.

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

What is the best way to fill in columns with data, adding one entry per column each time and repeating the process in a loop?

I am looking to display multiple posts on a page within 3 columns: column 1 | column 2 | column 3 | The desired outcome is: column 1 | column 2 | column 3 | post1 post2 post3 post4 post5 post6 ... For instance, the HTML code appe ...

phpjqueryhtmlforeachmultiple-columns

Avoid initiating any action when the user hovers over a child div

Within my HTML, there is a nested div structure with JavaScript functions triggered by the mouseover and mouseout events on an element with the class 'employeejob'. The issue arises when I hover over the small 'littlebox' div - first th ...

jquery

Issue with the Bootstrap navbar dropdown menu functionality not functioning as expected

<head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a150a17">[email protected]</a>/dist/css/bootstrap.min.css" rel=&q ...

javascripthtmlwebbootstrap-4bootstrap-5

Retrieve the selected option value from a dropdown menu when hovering or making a change within the same event

Apologies for my poor English. Is there a way to retrieve the value of a select box when a user either changes the select box or hovers over it with just one event? I attempted the following code snippet but it did not work as expected: jQuery("select[nam ...

javascriptjqueryhtml

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

jqueryhtmlcsswordpress

Creating multiple autocomplete fields using HTML5 and MySQL can greatly enhance user experience on your website

Looking to streamline the data entry process into a MySQL database, I am creating a simple HTML input page. To make input faster, I want to incorporate autocomplete fields. After finding a helpful script here and making some adjustments, the code now looks ...

phpmysqlhtmlautocomplete

Comparison of Lit Element and VSCode Plugin: Unfamiliar attribute 'frameborder'

I have a question regarding the use of an iframe within the template of a lit element. The lit element VSCode plugin is reporting the following errors: Unknown attribute 'frameborder'. Did you mean '.frameBorder'? This is a built-in t ...

javascripthtmltypescriptvisual-studio-codelit-element

Identify the parent container in jQuery and exclude any click events triggered by child input checkboxes

In my jQuery Mobile application, I have a piece of jQuery code that selects the child checkbox when a li is clicked. While this functionality works well, it interferes with the default behavior of the checkbox itself, making it impossible to deselect the c ...

javascriptjqueryjquery-mobilecheckbox

Checkbox functionality in jQuery fails to work properly after initial selection

Every time I click on the checkbox it seems to activate, but then when I try clicking on it again, nothing happens and the checkboxSelected class remains unchanged. Here is the HTML markup: <div class="galleryMenu-center"> <div ...

javascriptjqueryhtml

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

What is the best method for adding space around a Bootstrap card?

Here is the HTML template that I am working with: <div class='row'> <div class='col-md-6'> <div class='card mx-auto'> <div id='main'> {% for candidate ...

htmlcsstwitter-bootstrapbootstrap-4

Having difficulty passing locals in a partial JavaScript file in Rails 3

In my project, I am dealing with multiple JavaScript files such as new.js, index.js, create.js, etc., that handle Ajax calls and other jQuery code. Since these files contain many common code snippets, I have attempted to use partial JS files. For instance, ...

ruby-on-railsjquerypartiallocals

To highlight errors in ASP.NET MVC4 form validation, consider adding a vivid red border around the selectize dropdownlist

I have implemented the selectize framework for my dropdown list in asp.net mvc4 and successfully modified the CSS for all form fields bound to asp.net mvc4's validation engine. However, I am facing an issue with creating a border around the dropdownl ...

c#cssasp.net-mvc-4selectize.js

Difficulties encountered when trying to align the content within a div

I am struggling to align the content within three horizontal divs on an info bar. The center div should be aligned center and the right-hand div should be aligned to the right, but my CSS attempts have not been successful. My attempts included adding text ...

htmlcssvariablesmathcalculated-field

Is the renderer.setSize in Three.js calculated as a percentage of the screen size?

Is it possible to calculate the renderer.setSize based on a percentage of the screen? For instance, could I set my frame to be 80% of the device width and 80% of the device height? ...

javascripthtmlmobilethree.jsscreen

Having trouble with ng-click not correctly updating values within ng-repeat

Here is the code snippet: <div ng-repeat="data in products"> <div class=edit ng-click="dataUI.showEdit = true; content = data;"> </div> <div ng-repeat="renew in data.renewed"> <div class=edit ng-click="dataUI ...

javascripthtmlangularjs

Classroom dynamics shifting among the youth

I am working with a 2D array called "active[][]" containing 0s and 1s. Let's take a closer look at my HTML structure: <div class="place"> <div class="bigbaractive">1</div> <div class="smallbar"><div class="lock2">&l ...

jqueryclasschildren

Eliminating the save password prompt upon form submission in Firefox with the use of JavaScript

Is there a way to submit a form without triggering the browser's save password popup? This issue seems to be affecting Firefox version 59. I am attempting to log in to a form that includes two password input fields: <input type="password" name="l ...

javascriptjqueryhtml

Problem with Bootstrap 4: Modal backdrop lingers even when Modal is closed

Hello everyone! I'm currently using Bootstrap 4 Modal in my Razor view. Within that Modal, there is a Link that triggers an Ajax call when clicked. Before the Ajax call, I close the Modal using this code: $("#oppDateModal").modal('hide'); ...

bootstrap-modalbootstrap-4

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

javascriptjqueryhtmlcss