Having trouble getting the branding logo, icon, and hamburger menu button to line up properly on mobile devices

I'm relatively new to Bootstrap and still trying to wrap my head around it.

My goal is to have the branding logo aligned to the left, with the phone icon and hamburger nav icon on the right. Here's an example of what I'm aiming for:

https://i.sstatic.net/8UZ7F.png

You can find the code I'm currently struggling with here:

Currently, in smartphone view, they are all aligned to the left, which is not correct.

Any assistance would be greatly appreciated. Thank you.

V

htmlcssbootstrap-4alignmentnav

Answer №1

Instead of using the row-col structure, it is recommended to utilize the bootstrap template to create a navbar. This method should work effectively, especially when dealing with 2 buttons on the right side which can be placed inside a d-flex div.

The following section has been updated in the code snippet provided below:

<a class="navbar-brand" href="#" style="padding:0px;margin:0;">
    <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class="d-flex ml-auto">
    <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
      <i class="fas fa-phone fa-2x"></i>
    </a>
    <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
            <i class="fas fa-bars  fa-2x"></i>
        </button>
  </div>


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
  <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
    <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class="d-flex ml-auto">
    <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
      <i class="fas fa-phone fa-2x"></i>
    </a>
    <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
            <i class="fas fa-bars  fa-2x"></i>
        </button>
  </div>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Affiliations</a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</main>

Answer №2

I made some adjustments to your HTML code. You can view the updated code here:

To optimize the layout, you simply need to:

  1. Ensure that the row spans the full width of its parent container
  2. Replace the col-sm classes with col-auto
  3. Delete the ml-auto class from the last column

Answer №3

I have enclosed the icon and hamburger inside a div and applied Bootstrap classes d-flex no-gutters to it, along with the following CSS:

.brand-hamburger {
  width: 100%;
}


.brand-hamburger {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">

  <div class="row no-gutters brand-hamburger">
    <div class="col-sm">
      <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
        <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
      </a>
    </div>
    <div class="d-flex no-gutters">
      <div class="col-sm ml-auto">
        <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
          <i class="fas fa-phone fa-2x"></i>
        </a>
      </div>
      <div class="col-sm ml-auto">
        <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
          aria-label="Toggle navigation">
    <i class="fas fa-bars  fa-2x"></i>
    </button>
      </div>
    </div>
  </div>


  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Affiliations</a>
      </li>

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

<main role="main" class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main>

Answer №4

Create a parent div within that div and place both the icons in it using display:flex for the parent div. In the row div, set width:100% to ensure compatibility with mobile devices as well.

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
       <div class="row no-gutters" style="width: 100%;">
          <div class="col-sm">
             <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
             <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
             </a>
          </div>
          <div class="mobile-device" style="display:flex">
             <div class="col-sm ml-auto">
                <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
                <i class="fas fa-phone fa-2x"></i>
                </a>      
             </div>
             <div class="col-sm ml-auto">
                <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars  fa-2x"></i>
                </button>
             </div>
          </div>
       </div>
       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav ml-auto">
             <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Our Team</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Affiliations</a>
             </li>
          </ul>
       </div>
    </nav>
    <main role="main" class="container">
       <div class="starter-template">
          <h1>Bootstrap starter template</h1>
          <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
       </div>
    </main>

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

Is there a way to set overflow-x to auto and overflow-y to visible simultaneously?

I'm facing a specific issue where I need to display overflow in a horizontal direction for scrolling, but not in the vertical direction. Perhaps an image can clarify this better. Is there a solution using CSS or JavaScript to achieve this? ...

javascripthtmlcssoverflowhorizontal-scrolling

How can Angular be used to show text without the accompanying HTML tags?

I have a string saved in localStorage that includes HTML tags because I am using ngx-quill (Angular Rich Text Editor) which saves the data in HTML format. Here is a preview of my localStorage: https://i.sstatic.net/NCSgJ.png As shown in the image above, ...

htmlangular

Concealing Form Values with Radio Buttons using HTML, CSS, and PHP

I'm working on creating a sign-in form with multiple options. I want users to be able to choose between signing in with their username or email using radio buttons. I'm wondering if there's a way to achieve this using HTML, CSS, and PHP, or ...

phphtmlcssforms

Switch out a static image for a dynamic YouTube video using CSS styling

I've been working on customizing a template website, and I want to switch out the current image for a YouTube video. I have the code from YouTube ready to go, but I'm not sure what changes need to be made in the template. Take a look at the CSS ...

htmlcssimagereplaceyoutube

Explore the world of interior CSS border styles

Trying to achieve a unique border effect like the one shown in the image. Experimented with different styles such as inset, outset, ridge, and groove, but unable to get the desired outcome. Is there a way to create a border that bends inwards towards the m ...

htmlcsscss-shapes

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

How can I connect a JavaScript function with a Bootstrap Text Input Modal?

My webpage contains a basic Bootstrap Modal with a text input field, which I want to display when the "Report A Bug" button is clicked. <div class="btn-group" id="exampleModal" role="group"> <button id="myBtn ...

javascriptbootstrap-4

Transforming jQuery into pure Javascript code

UPDATE SUCCESS! I've cracked the code. The solution was to include jQuery by adding it in Joomla through the template/index.php file with this line under "//Add Javascript Frameworks" JHtml::_('jquery.framework');. PROGRESS I'm seekin ...

javascriptjqueryhtmlajax

Place elements in a grid layout using CSS (and also ensure they are centered)

My goal is to create a data-grid (table layout) where the elements have fixed sizes. These elements should be placed in the same line until they can't fit anymore, then move to the next line. I have tried using inline-blocks for this, but I'm st ...

htmlcss

Problem with Bootstrap 4 layout in Firefox - works fine, but not displaying correctly in

Hey everyone, I've encountered an issue with my code. It's working perfectly fine in Firefox, but in Chrome and Opera, the layout is all messed up. Can anyone help me pinpoint what might be going wrong here? <div class="row broadband-block"&g ...

htmlcssflexboxbootstrap-4

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Upon inspecting the generated project, I noticed a multitude of color variables such as --bs-body-bg. The developer tools indicate it is in _root.scss, however, that file appears to be non-existent and I suspect those variables may actually reside within b ...

cssbootstrap-4blazorblazor-server-side

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

javascriptandroidhtmlioscss

Blurring of text that occurs after resizing in CSS

When I use scale transform to zoom a div in HTML, the text inside becomes blurred. Is there a solution to make the text clear like the original? @keyframes scaleText { from { transform: scale(0.5, 0.5); } to { transform: scale(2, 2); } } ...

htmlcss

"Get a glimpse of the brackets image with real-time live

I seem to be encountering a strange issue. I have double-checked the source code for my image, and when I view the page in Chrome without using Brackets, the image displays properly. However, when I use Brackets Live preview, the image does not show up i ...

htmlcssadobe-brackets

What is the best way to use JavaScript to disable all duplicate textboxes with identical IDs?

I am faced with a situation where I have multiple TextBoxes with the same Id. Due to certain restrictions, I am unable to use Class for differentiation. My goal is to only enable the first TextBox and disable the others. Below is an example of my code wit ...

javascriptjqueryhtml

Adjust the size of the DIV container to match the width of its floating contents

I have been experimenting with creating a container div that adjusts its width based on the size of its contents. To achieve this, I have successfully used float: left on the container. Here's what my current setup looks like: HTML <div class=&ap ...

csshtmlcss-float

Utilize the Bootstrap 4 class to ensure that the navigation brand image is visible solely on medium screens or larger

<header> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container"> <a class="navbar-brand" href="#"> <img class="navbar-brand d-none d-md-block" src="img/logo.png"></ ...

imageclassbootstrap-4nav

Animate the page transition with jQuery once the CSS animation finishes

My screen is split in two halves, and when you click on a side, they are supposed to slide open like curtains and then fade into another page. I have successfully created the animation using CSS and jQuery to add the appropriate class on the click event. ...

javascriptjqueryhtmlcssanimation

Displaying three tables in each row using ng-repeat, with the ability to repeat the process multiple times

Is it possible to repeat a table multiple times with each set of three tables in the same line using AngularJS and Bootstrap? I am unsure how this can be achieved with ng-repeat. table 1 | table 2 | table 3 table 4 | table 5 | ... <div ng-repeat="zo ...

htmlangularjsbootstrap-4

What steps can I take to prevent already selected options from being chosen in a Vue.js HTML form?

Among my json data, I have a list of all inventories: { "status": true, "data": [ { "inv_id": 1, "name": "Arts" }, { "inv_id": 2, "name": "web" }, { "inv_id": 3, "name": "mobileapp" }, { "inv_id": 4, "name": "ws" }, { "inv_id": 5, ...

javascripthtmlvue.jsvue-componentvue-router