What is the best way to create a search bar that overlaps with a filter button?

Desired Ui Looking to create a search bar with a button positioned to the right of it, partially overlapping a banner. Above these elements is a title; however, one issue I'm encountering is that the title covers the search bar when the page size is reduced. While I have successfully implemented this design, it lacks responsiveness on mobile devices. The main challenge I face is preventing the button from moving to the next line as the page shrinks. I aim to keep the button square-shaped while allowing only the search bar to shrink in size. Are there any suggestions or techniques for optimizing the display of this layout across all screen sizes?

htmlcssuser-interfacebootstrap-4

Answer №1

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.header-section {
  height: 50%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-bottom: solid 2px;
}

.search-bar {
  z-index: 20;
  position: absolute;
  background: transparent;
  padding: 20px;
  width: 100%;
  text-align: center;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.search-box {
  background: white;
  width: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  height: 100%;
  border: solid 2px;
}

.search-input {
  /*   border-radius: 20px; */
  border: solid 0px;
  outline: none;
  text-decoration: none;
  height: 100%;
  padding: 8px;
}

.search-btn {
  background: white;
  width: auto;
  /*   padding:10px; */
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /*   height:100%; */
  border: solid 2px;
  padding: 7px;
  margin-left: 20px;
}

.icon {
  /*   width: 35px;
  height: 35px; */
  font-size: 25px;
  font-weight: 40;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="header-section">
      Search from hundreds of recipes.
    </div>
    <div class="search-bar">
      <div class="search-box"><input class='search-input' placeholder='Search...'></div>
      <div class="search-btn">
        <ion-icon name="filter-outline" class='icon'></ion-icon>
      </div>
    </div>
  </div>



  <script type="module" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30595f5e59535f5e4370051e051e02">[email protected]</a>/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bdbbbabdb7bbbaa794e1fae1fae6">[email protected]</a>/dist/ionicons/ionicons.js"></script>
</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

When attempting to view video content on mobile devices, streaming may not be supported. In these cases, it is necessary to display a placeholder

Having a problem with the homepage of Our background video is not playing on some older browsers and mobile devices, and we would like to replace it with an image in those cases. I have attempted various solutions, but cannot seem to find a way to displa ...

csshtml

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

javascriptjquerycsshtmlresponsive-design

What is the best way to activate a function to control animation transitions?

My goal is to manually control transitions in my HTML using JavaScript code, such as a tween library like TweenMax. Instead of relying on CSS for transitions with classes like .ng-enter, I want to target a JavaScript function: function onEnter() { /* tra ...

javascripthtmlangularjsanimationtween

I'm having trouble with my inline list breaking when I try to add something to it. How can I fix this

I'm experiencing an issue where moving my mouse over any of the li's causes them to go out of place. How can I resolve this issue? Here is a demo: https://jsfiddle.net/z970pg6n/ ul { list-style: none; display: block; padding: 0; margi ...

htmlcss

Combining two PHP includes within a single HTML file

As I delve into web development, an interesting issue has arisen: I have a single HTML file with two PHP includes. Strangely, only the first include is working while the second one seems to halt the transfer of HTML code to the browser. There are no errors ...

phphtml

Angular's Innovative 3D-esque Carousel Rotation

My goal is to design a pseudo-3d carousel with 5 items, like the example below (and have them rotate around): https://i.sstatic.net/FtcSe.png I came across this fantastic stackblitz as a base, and I've been tinkering with it for hours attempting to ...

javascriptcssangular

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

cssangulartwitter-bootstrap

Keep duplicating a single object until it fills up the entire screen

Is there a way to make an HTML/CSS element repeat until it covers the entire screen height, without repeating it indefinitely? #container{ height: 100vh; width: 100vw; } .dotts{ background-color: yellow; border-radius: 50%; height: 20px; width: 20p ...

javascriptjqueryhtmlcss

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground

Convert and transfer CSS image data encoded in Base-64 to Asp.Net MVC/WebApi

Regarding the query. I successfully displayed a base-64 encoded image on the client side. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDk ...

c#cssasp.netasp.net-mvcasp.net-web-api

The values in my JavaScript don't correspond to the values in my CSS

Is it possible to retrieve the display value (display:none; or display:block;) of a div with the ID "navmenu" using JavaScript? I have encountered an issue where I can successfully read the style values when they are set within the same HTML file, but not ...

javascripthtmlcss

Is it possible to create a dynamic rendering effect using HTML and CSS instead of

Looking for a library that can render HTML content dynamically in Flash or Flex? I need a simple function that can take a string containing HTML and CSS, and render it without using external files. The output should be real HTML rendered in Flash, not just ...

htmlapache-flexflashactionscript-3mxml

JS code query to specifically target iOS devices

What are the steps to develop a website that can only be accessed by iOS users? In other words, if someone is using Windows or Android, they would be blocked from accessing the site with a message suggesting they download it on Android instead. Additional ...

htmlreactjsreact-native

Could you provide some advice for creating a Single Page website?

I am working on a simple HTML setup with various elements such as a navbar and content blocks. <html> <head> <title>My HTML5 App</title> <meta charset="UTF-8"> <meta name="viewport" content="wid ...

javascriptjqueryhtml

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable ...

htmlcssbootstrap-5

Equalizing the space between table headings and content

I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...

cssreactjs

How to style an HTML table with just a bottom border

Is there a way to recreate the Staff Directory section of this page using only HTML, without having to rely on CSS and Javascript? Specifically, I want to create a table with only bottom borders/dividers for each line. Any suggestions on how to achieve thi ...

htmlhtml-tableborderdivider

What is the process for embedding images and text within a nested division element?

I have a website layout with 4 main sections: header, left side, right side, and footer. I would like to further divide the header into two sections - left header and right header. The right header should contain an image along with other options like home ...

htmlcss

Bring in a video file in order to watch it on your web page (HTML)

Is there a way to upload and play a video file using the video element? I am looking to add a video file to my webpage that can be played using a video element. <input type="file"> <h3>Video to be imported:</h3> <video width="320" ...

javascripthtml

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js