What steps are needed to design a search bar similar to Zomato's?

I am looking to create a search bar that resembles the one on . I have managed to make a floating search box on top of my background image. However, I am unsure how to align various input fields and buttons side by side. Below is the current CSS code I am using:

.search {
    background:rgba(0,0,0,0.6);
    border: 2px solid #414141;
    border-radius: 5px;
    padding: 10px;
}

header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/header-bg.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
}

header .intro-text .intro-lead-in {
    margin-bottom: 25px;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 22px;
    font-style: italic;
    line-height: 22px;
}

Here is the HTML structure:

<body id="page-top" class="index">

    <!-- Navbar content goes here -->

    <!-- Header section -->
    <header>

               <div class="intro-text">
                            <div class="intro-lead-in">Welcome To Our Studio!</div>
                            <div class="intro-heading">It's Nice To Meet You</div>
               </div>     

    </header>
</body>
css

Answer №1

Check out this fiddle that showcases the styling of a bar. The main points of interest in the CSS are:

.header-link {
    float: left;
    height: 60px;
    margin: 0px 7px auto 0px;
}
.header-link a {
    line-height: 62px;
   color:#FFF;
}
.header-hiring-btn {
    background-color: #CB202D;
    padding: 7px 8px 6px;
    border-radius: 3px;
    text-align: center;
    color: #FFF !important;
    transition: all 0.15s ease-out 0s;
    margin-right: 6px;
}


.header {
    box-sizing: border-box;
    height: 60px;
    position: absolute;
    width: 100%;
    z-index: 7;
    background: none repeat scroll 0% 0% rgba(45, 45, 45, 0.8) !important;
    color:#FFF;
}
.wrapper {
    padding-left: 10px;
    padding-right: 10px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    max-width: 1140px;
}
.col-s-16 {
    width: 100%;
    box-sizing: border-box;
}
.logo-header {
    width: 134px;
}
.logo {
    display: inline-block;
    float: left;
    text-align: center;
    height:46px;
}
.logo img {
    width: 130px;
    margin-top: 15px;
    margin-left: -4px;
    vertical-align: middle;
    border: 0px none;
}
.header-navigation {
    float: right;
    display: inline-block;
    height: 60px;
}
.login-navigation {
    float: left;
}
.header-link {
    float: left;
    height: 60px;
    margin: 0px 7px auto 0px;
}
.header-link a {
    line-height: 62px;
    color:#FFF;
}
.header-hiring-btn {
    background-color: #CB202D;
    padding: 7px 8px 6px;
    border-radius: 3px;
    text-align: center;
    color: #FFF !important;
    transition: all 0.15s ease-out 0s;
    margin-right: 6px;
}
<header class="header  header--fixed " id="header">
    <div class="wrapper">
        <div class="">
            <div class="col-s-16"> <a class="logo logo--header" href="https://www.zomato.com" title="">
          <img src="https://bzmtcdn-a.akamaihd.net/images/logo/zlogo.png" alt="">
      </a>

                <section class="header-navigation" id="header-navigation">
                    <section class="login-navigation" id="login-navigation">
                        <div class="header-link"> <a class="header-hiring-btn" href="https://www.zomato.com/careers" target="_blank">We're Hiring!</a>

                        </div> <span class="header-link">
      <a href="#" class="facebook-login header-login-button" data-reload="true">Log in with Facebook</a>
    </span>
 <span class="header-link mr0">
      <a href="#" id="signin-link">Log in</a>
    </span>

                    </section>
                </section>
                <!-- end header-navigation -->
            </div>
            <!-- end col-s-16 -->
        </div>
        <!-- end row -->
    </div>
    <!-- end wrapping class -->
</header>

This code appears to have been influenced by bootstrap.css reconstruction. Hopefully, it proves useful for your project.

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

Expanding Material Ui menu to occupy the entire width of the page

I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page. import React, { Component } from "react"; import Menu from "@material-ui/core/Menu"; ...

javascriptcssreactjsmaterial-designmaterial-ui

Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows: <blockquote> <p><img src="..."/> A paragraph...</p> <p>...</p> ... </blockquote> Here is the CSS u ...

javascripthtmlcssiossafari

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

javascripthtmlcssangularjs

modifying the appearance of the play button through a JavaScript event without directly altering it

I am currently working on building a music player from scratch using HTML, CSS, and JavaScript only. To store the list of songs, I have created an array named "songs" with details such as song name, file path, and cover image path. let songs = [ {songNa ...

javascripthtmlcssevent-handlingaddeventlistener

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with: class InitialForm(Form): trn = IntegerField(widget=NumberInput, required = False) klient = ChoiceField(choices=KLIENTS, required = False) class SecondForm(Form): faktura = CharField(max_length = ...

cssdjangodjango-forms

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing a 1900 x 1080 image within a div as the background <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ ...

javascriptjqueryhtmlcssimage

Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...

csssass

Achieving a transparent background color for a div without affecting the content with CSS

I am attempting to design a div element with a basic background color and some text displayed on it. I would like to lower the opacity of the background color in this div, but every time I try, the opacity of the text also changes. Is there a way to adjust ...

htmlcss

Flex sidebar collapse menu

I am currently in the process of developing an admin panel for my website. I have a sidebar menu that I would like to hide behind a hamburger icon and only expand when clicked on. After researching potential solutions, I haven't found much that fits m ...

htmlcssflexbox

Utilizing reusable styled components with pseudo elements and advanced logic

How can I make the shared style more dynamic by changing the value of left or width based on a passed value or boolean logic across different components? I prefer not to pass it as a prop in the actual component like <bar left="20" />, but ...

cssreactjsstyled-components

Adjusting the opacity of a div while scrolling

I've searched multiple pages, but haven't found a solution that works for me. I'm trying to make the text in my div gradually become more transparent as I scroll. Can anyone help with this? Here's my code: <script src = "/js/titleSc ...

javascripthtmlcss

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Generate dynamic and user-defined positioning requires input parameters: offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth ...

javascripthtmlcssdom

Height and placeholder issue with ion-searchbar

Hey there, I hope everything is going well for you. I've encountered a problem with the Ionic 5 - Angular Searchbar feature. This is how I added the searchbar: <ion-searchbar [(ngModel)]="text" (ionChange)="sear ...

cssangularionic-frameworksearchbar

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

Setting the CSS position to fixed for a dynamically generated canvas using JavaScript

My goal is to fix the position style of the canvas using JavaScript in order to eliminate scroll bars. Interestingly, I can easily change the style using Chrome Inspector with no issues, but when it comes to implementing it through JS, I face difficulties. ...

javascriptcsshtmlcanvas

Access an HTML element and using JavaScript to make changes to it

As a new web developer, I am eager to create a grid of file upload zones on my site. I have decided to use DropZone.js for this project. I have customized DropZone and added multiple drop zones in the HTML. The grid layout consists of four rows with four ...

javascriptjqueryhtmlcssnode.js

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appear ...

cssangulardatepickerdatetimepicker

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly. In an attempt to fix this issue, I tried using fully qualified path ...

javascriptcssasp.netiisurl-rewriting

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

css

Lose yourself in the horizontal beauty of the CSS menu

Currently, I am working on an application using ASP.Net MVC4, jquery 1.9, and CSS 2.1. However, I have encountered an issue with the horizontal menu display. Whenever a form with a jquery component is shown, some buttons seem to disappear behind the menu, ...

jqueryhtmlcssjquery-uiasp.net-mvc-4