Rearrange divs from left to right on mobile display

I need help creating a header bar with three elements as shown below

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

When viewed on mobile, I want the menu (toggle-icon) to shift left and the logo to be centered. I attempted using push and pull with no success. Is there another way to achieve this?

Below is my code. Note that I haven't added any separate media queries yet, just relying on bootstrap classes.

<div class="row d-flex flex-nowrap" style="background-color: #2B3536;">
    <div class="col-lg-1 col-md-1 col-sm-2 col-2 align-self-center"><img src="https://dummyimage.com/127x50/2b3536/fff"></div>
    <div class="col-lg-8 col-md-9 col-sm-8 col-8 order-sm-first">
        <nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-expand-sm">
            <div class="container d-flex flex-row flex-md-nowrap flex-wrap">
              <a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false">
                <i class="fa fa-bars fa-lg text-white"></i>
              </a>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav header-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 3</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu 4</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                  </li>
                </ul>
              </div>
            </div>
        </nav>
    </div>
    <div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center">
        <div class="input-group">
          <input class="form-control hidden-md-down"
                 placeholder="I'm looking for">
          <div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div>
        </div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

One way to enhance your CSS file is by including a media query.

.navbar-brand{
   padding-top:8px;
 }
.navbar-brand img{
   height:35px;
    width:35px
}

@media (max-width:767px) {
  .navbar-brand{
    position: absolute;
    left: 40%;
  }
}

.navbar-toggle {
  float: left;
}

To see the design in action, check out this live demo of the menu.

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 causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Before we delve into the details, I invite you to take a look at this fiddle using IE7. It's quite intricate and not something I want to repeat here. The main issue is that clicking on the red block should display additional information. The top row ...

cssinternet-explorerinternet-explorer-7

Elements are unresponsive to scrolling inputs

My Ionic 2 input elements are not scrolling to the top when the keyboard is shown. I've tried everything I could find on Google, making sure the keyboard disable scroll is set to false. However, I still can't figure out what's causing the sc ...

javascripthtmlcsstypescriptionic2

Can the functionality of a button be disabled after being clicked a total of 5 times?

Once a user clicks the button five times, I plan for it to be disabled. Can this be achieved solely with HTML, or would JavaScript be necessary? ...

javascripthtml

Tips on accessing a particular value from an HTML header

My current task involves using selenium to extract request headers from a web page. However, I am facing an issue where all request headers are being printed out, whereas I only need one specific value from them. Despite searching online, I have been unabl ...

pythonhtmlseleniumpython-requestsheader

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

javascripthtmlcss

tips for creating dynamic visual effects using CSS on filtered images

img:hover{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } This CSS code snippet will convert the image from color to grayscale upon hovering. However, I am looking to achieve this effect with a smooth animation ...

css

Menu collapse and expand feature similar to that of Gmail

I am attempting to replicate the menu-collapse style found in the new Gmail interface. When a menu exceeds a certain height, I want it to collapse to a predetermined height. Upon hovering over the exposed menu area, I want the menu to expand back to its or ...

jqueryhtml

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

javascripthtmljquerycss

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Unable to consistently select a radio button via code across different browsers

Is there a way to automatically select a radio button based on the URL path? $(document).ready(function () { function checkRadioBasedOnUrl() { var urlPath = window.location.pathname.split("/"); console.log(urlPath); // ["", "tradeshow ...

javascriptjqueryhtml

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Create a class for the grandparent element

Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...

javascriptjqueryhtmlcssdrop-down-menu

Creating a text node in a JavaScript application adds HTML content

Is there a way to append an HTML formatted block to an existing div using appendChild without the HTML code itself getting appended? Any tips on how to add HTML design instead of just code with appendChild and createTextNode? Check out this Fiddle <di ...

javascripthtml

Adjust the Bootstrap settings to center the title on the navbar and shift the logout button to the right side

Is there a way to centrally align the title "My project" in the navbar while also keeping the logout button on the right of the same line as the title? <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="contain ...

htmlcsstwitter-bootstrap

Tips on verifying if user x has sent over two messages in the chat and concealing their identity

I have a JavaScript chat application that is causing me some trouble. I recently implemented a feature to display user names on top of messages, and while it works well for the first message, I am struggling to hide the user's name when they send subs ...

javascripthtmlcss

Switch input-lg to input-sm in Bootstrap3 for smaller screens

One of my challenges is incorporating Twitter Bootstrap’s input-lg class on all input fields. I am wondering if there is a way, possibly utilizing JavaScript, to seamlessly switch to Twitter Bootstrap's input-sm class on smaller screens. This would ...

twitter-bootstrapcssmedia-queries

No validation errors are currently being displayed. I am attempting to retrieve the error message when validation fails

My form validation error has suddenly stopped working. It was functioning properly yesterday, so I must have made a mistake somewhere, but I can't seem to pinpoint it. Now, when I attempt to sign up without entering any information, it just redirects ...

phphtmlcodeigniter

Choose the initial p tag that includes an image, based on the content of another div

I am trying to figure out how to manipulate the code on my website: <div class="the-post-thumbnail"> <img src="" alt="" width="" height="" /> </div> <div class="post-body"> <p><img src="" alt="" width="" height="" ...

javascriptjqueryhtmlcss

Double Checkbox

My current project involves creating an update page, and I have successfully completed most of it except for the checkbox section. Strangely, the checkboxes are being duplicated, and I haven't been able to identify the reason behind this issue yet. Th ...

phphtmllaravel

Disabling collapse in Bootstrap 5 is impossible using stopPropagation() when clicking on a particular element

I'm attempting to prevent an element from collapsing/expanding when clicking a checkbox inside it. In my example on codepen, my code worked fine with Bootstrap v4, but after switching to v5, the stopPropagation function doesn't seem to work. Yo ...

javascripthtmlbootstrap-5