The navigation elements are misaligned when viewed on a mobile device

The layout of my navigation items is problematic on mobile view as they are taking up two lines. The search bar, hamburger menu, and logo are not aligned on a single line which is confusing for users.

Here is an example of the issue in mobile view:

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

This is how it should look in desktop view:

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

I would appreciate any advice or suggestions to resolve this layout issue.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  // Head content here
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark justify-content-between">
      // Navbar contents here
   </nav>
  </body>
</html>

htmlcssbootstrap-4

Answer №1

I have made a modification where I replaced col-11 with col-6 for the search-box element.

<div class="col-md-6 col-lg-6 col-6 mx-auto my-auto search-box">

This change allows you to use col-6 on all devices seamlessly.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8>
  <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
  <link rel="manifest" href="images/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404716a756a77">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <title>Rento</title>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark justify-content-between">
    <a class="navbar-brand" href="#">
      <img class="logo rounded ms-1" src="images/logo.jpeg" alt="Rento" width="70" height="70">
    </a>
    <div class="col-md-6 col-lg-6 col-6 mx-auto my-auto search-box">
      <div class="input-group form-container">
        <input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" autofocus="autofocus" autocomplete="off">
        <span class="input-group-btn">
          <button class="btn btn-outline-success" type="button" name="button">Search</button>
        </span>
      </div>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarTogglerDemo01">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Signin</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Cart</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
  </nav>
  </div>
</body>

</html>

Answer №2

To fix the issue of elements not aligning in a single line, you need to adjust the size of the search tab as it is too large. Making this change will resolve the problem. Below is the code provided for your reference:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
    ...
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
   </nav>
</div>
  </body>
</html>

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

Leverage CSS to generate a visually appealing table of contents incorporating images and text blocks, perfectly aligned for an enhanced

I am in the process of designing a unique clip showcase on my website. The concept involves creating a table-like structure with a thumbnail image on the left and various information on the right, including a title, publication source, date, and descriptio ...

cssimagetextalignmentcss-tables

How can I position one DIV relative to another DIV?

Can a DIV be positioned relative to another DIV? My guess is that it involves nesting it inside the reference DIV and utilizing position: relative. However, I'm struggling with how to achieve this without impacting the content of the reference DIV. An ...

htmlcss

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

javascriptjqueryajaxhtml

CSS transformation on the go

Can anyone help me? I am trying to create an animation for a hamburger menu when checked and unchecked. I have managed to animate the menu, but I'm struggling with animating the left menu when transforming it to 0. &__menu { transform: transla ...

csssasscss-transitions

Utilize jQuery to choose a specific tab

I have implemented a jquery tab in my UI. I want to have the second tab selected when the page loads, instead of defaulting to the tab with the "Active" class. Here is my HTML tab code: <div class="typo"> <div class="container-fluid"> ...

javascriptjqueryhtml

The design template is failing to be implemented on my personal server utilizing node.js

I've encountered an issue while developing the signup page on my local server using Bootstrap 4. The CSS is not getting applied properly when I run it locally, although it displays correctly in the browser. Can someone explain why this is happening? ...

javascripthtmlcssnode.jsbootstrap-4

The blur event is failing to trigger when I click outside the input field

Currently, I am working on setting up jQuery validation for a form. I have successfully added the class 'has-error' to div.form-control. My next goal is to remove this class when I either press TAB or click out of the input field. However, my cur ...

javascriptjqueryhtmldom

Strategies for creating a dynamic progress bar using jQuery and JavaScript

I'm currently working on a project that involves increasing a percentage number while filling up the background color inside it based on the percentage value. The current setup is functional in terms of animating the background, but I need it to dynam ...

javascripthtmlcssjquery-animate

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

Is there a way to align the mat card title and subtitle on a single line?

My code is utilizing Angular material and here is the HTML snippet: <mat-card> <mat-card-header *ngFor="let club of result[0]"> <mat-card-title>{{club.clubName}}</mat-card-title> <mat-card-subtitle>Clu ...

htmlcssangularangular-material

No links were detected in the page source

I am attempting to locate URL links within the page source of this website. http://data2.7m.cn/database/index_en.htm However, I have been unable to find any links in the page source or even after trying Ajax calls with Firebug. There are no links for cou ...

jqueryajaxhtml

Using a JavaScript onclick function to retrieve specific elements within the document

I'm attempting to extract the elements from the source that was clicked on, but for some reason it's not functioning correctly. Check out my JSFIDDLE Here's the HTML: <span class="populate" onclick="populate();" href="?id=1">Hello&l ...

javascripthtmlcssobject

The height attribute in HTML tables fails to restrict height in Firefox

Is there a way to restrict the height of a table while still being able to scroll through the hidden elements? I've tried a few methods but none seem to work as intended: http://www.example.com/code/example table.ex1 { table-layout: auto; h ...

htmlcss

From Laravel Bootstrap to VUE: A Step-by-Step Guide

When I initially set up my Laravel project with Bootstrap scaffolding, I used the following command: php artisan ui bootstrap Do I need to create a completely new Laravel project in order to implement VUE scaffolding, or is it possible to convert the exi ...

laravelvue.jsbootstrap-4

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

Creating a directive that dynamically expands templates for varying blocks of code based on different ng-repeat values

I have a snippet of code that I want to reuse across various HTML pages. The code in question is as follows: <h5>Brand</h5> <div> <div ng-repeat="brand in store.brands.tops"> <label> <input type="checkbox" ng-t ...

htmlangularjs

Troubleshooting: Browser fails to update after CSSStyleRule modification using JavaScript

When making changes to CSS properties of elements using JS methods like CSSStyleSheet, insertRule, deleteRule, or CSSStyleRule.style.setProperty(), I noticed that the underlying CSS is updated but the page does not reflect these changes immediately. The c ...

javascriptcssgoogle-chrome

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

Generate random unique values from an array to populate a text input field in HTML. Display a message once all unique values have been shown

I have included an option code and text box below: <select id="sel" class="form-control input-lg" data-live-search="true"> <option value="">-- Choose Your Country--</option> </select><br/><br/><br/> &l ...

htmljqueryarraysjsonrandom