The search icon will be positioned underneath the form input field

While working on a Bootstrap navbar with a search box, I encountered a problem on mobile devices. Everything looks fine at a screen width of 576px or above, but below that, the search icon moves under the input field.

At 576px: https://i.sstatic.net/xWqKv.png

At 550px: https://i.sstatic.net/NpxlV.png

I'm wondering why this is happening and how I can fix it. I've tried multiple solutions without success. I haven't included any media queries for widths below 576px; only for max-width: 992px.

body {
  background-color: black !important;
}

.mobile-form {
  border: none;
  color: #ffffff;
  background-color: #292935;
}

.mobile-border {
  border-bottom: 1px solid #ffffff;
  margin-left: 20px;
  margin-right: 20px;
}

.mobile-search-icon {
  float: right;
  margin-top: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">

<form class="form-inline d-block d-lg-none mobile-border">
  <input class="form-control mobile-form" type="search" placeholder="Search our site" aria-label="Search">
  <i class="fas fa-search text-white ml-3 mobile-search-icon" aria-hidden="true"></i>
</form>

htmlcssbootstrap-4responsive-design

Answer №1

Implement the following:

.mobile-form
 position: relative

.mobile-search-icon
 position: absolute
 right: 0
 top: 10px

Answer №2

After some troubleshooting, I was able to find the solution:

  1. Replace "d-block" with "d-flex" in the HTML code
  2. Add the following CSS:
.mobile-border {
        justify-content: space-between;
        flex-flow: row nowrap;
}
  1. Additionally, remove "float-right" from the mobile-search-icon element

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

Tips for overriding a CSS class without impacting other classes sharing the same name

Within a page filled with various widgets, I am facing an issue where I need to override the container class for a specific widget. However, the problem is that all widgets with the same class name are being impacted. Attached below is a screenshot from in ...

javascripthtmlcssbootstrap-4overriding

Access the configuration of a web browser

I am in the process of creating a website where I need to prompt the user to enable JavaScript. Is there a way for me to include a link to the browser's settings page? Here is an example: <noscript> <div>Please enable JavaScript &l ...

javascripthtml

The scroll functionality does not seem to be functioning as intended on mobile devices when

Hey there, I'm currently working on making my navbar sticky and applying it when the page is scrolled. The code I have works flawlessly on desktop, but unfortunately, it doesn't seem to work on the mobile version. Any suggestions? window.addE ...

javascripthtmlcss

Incorporating both an href link and PHP code using a single click event on a submit button

After exploring various forums, I am still struggling to solve this issue. Can someone please assist me in understanding how to achieve this? When I click the submit button, it currently directs me to a file location via a link without any issues. Howeve ...

phphtmlmysql

Creating Bi-directional Computed Properties with Vue.js Class Components

Is it feasible to utilize two-way computed properties in vuejs while working with class-style components? For my specific scenario, involving a basic vuex store application, is there a method to connect the store values to a select using v-model? The vuex ...

javascripthtmlvue.jsdata-binding

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

Showing an image stored in an array using JavaScript

This script is designed to pull images from a specific location on an HTML page. images = new Array(); images[0] = new Image(); images[0].src = "images/kate.jpg"; images[1] = new Image(); images[1].src = "images/mila.jpg"; document.write(images[0]); I&a ...

javascripthtmlarraysimage

How can I extract and display chosen values from multiple dropdown menus in designated text boxes based on their unique identifiers?

A website for evaluating car values is in the works, using a combination of PHP, MYSQL, JQUERY, and JavaScript. The database includes 3 tables: Table "car_make": id make 1 BMW Table "model": model_id model_name make_id 1 M3 1 Table "ca ...

javascriptphpjqueryhtml

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Vertical responsive navigation bar using Bootstrap 4

My webpage utilizes Bootstrap 4 and features a horizontal navigation menu. However, on smaller devices, the menu collapses and the items remain in a horizontal layout. How can I modify it to display the items vertically, with one item per line? ...

twitter-bootstrapmenunavigationtwitter-bootstrap-4bootstrap-4

When hovering over a thumbnail, create a transition effect on both the thumbnail itself and the associated H

I've been struggling with this problem for a few days now. My goal is to achieve a similar effect to what is on this website: I want to highlight a link when the mouse hovers over a thumbnail, with a transition effect. I think it has something to do ...

jqueryhtmlcsscss-transitions

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...

htmlreactjstypescriptmaterial-ui

Is there a way to use jQuery to efficiently refresh all values within a table?

Whenever I click the "Update All" button, I want all the CHANTIERS values in each line of the list of SALARIES to be checked and updated according to the value selected in the dropdown list. For example, if I choose the value 1 in the dropdown list and cli ...

jqueryhtml

Enhancing speed and efficiency when zooming in on various elements using React

Issue: The zoom functionality in my React application becomes sluggish when I have over 20 components rendered. The app needs to handle zooming with thousands of components being rendered. Current zoom implementation: Currently, in my application, there ...

javascriptcssreactjsperformancezooming

Tips for closing the navbar by clicking elsewhere on the page

Is there a way to modify my code in order for the navbar to close when clicking outside of it, while staying open if something inside it is clicked? $(document).ready(function() { $('.nav-btn').on('click', function() { $('.na ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Adjust the top spacing in relation to the paragraph tag using jQuery

I wish to create multiple div elements with nested p tags that are initially hidden. Upon hovering over each div, I want the corresponding p tag to move up by the negative value of its own height. For instance: The first p tag has a height of 60px and a m ...

jqueryhtmlcss

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

What is the best way to iterate through an object using NgFor?

One scenario involves managing multiple students with various details such as name, email, phone, etc., along with a note object: { "_id" : ObjectId("5b9551a60e89ad15a8ff77fb"), "name" : "RICHE", "note" : [ { "subject" : " ...

htmlangular

Creating a mandatory 'Select' dropdown field in Vue.js

Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...

javascripthtmlvue.js

Ways to customize the hover effect for react-bootstrap navbar link

I'm looking to update the hover effect color from white to green, but I'm having trouble finding the correct CSS code for it. <Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate ...

javascriptcssreactjsreact-bootstrap