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

Ways to modify div content depending on the size of the screen

When the screen size becomes small, my goal is to modify the content within the row divs of the indices_container. Currently, all screen sizes display the index name, price, 1-day change, and year-to-date (YTD) change for each row. I only want to show the ...

htmlcssbootstrap-4frontend

What is the best way to manipulate the size and orientation of an image upon hovering over

I'm struggling to figure out how to simultaneously rotate and scale a .png file when the user hovers over it. Currently, it only scales when I hover on the picture. I understand that the scale property overwrites the first transform but I can't s ...

htmlcssrotationhoverscale

"Enhance Your HTA Webpage with a Hover Zoom Effect on CSS Tables

Greetings and thank you for taking the time to read my message. I am relatively new to this, so please bear with me if things seem a bit disorganized. I have constructed a table and am attempting to implement a hover effect to zoom in on a specific cell w ...

csshoverzoominghtml-tablehta

What is the best way to execute a function based on the width of the screen?

Two functions need to be called based on the screen width. Here is one attempt: var winWidth = $(window).width(); var sections = function() { $('.image').each(function(){ var $this = $(this), x = $this.find('img'). ...

javascriptjquerycssmedia-queries

Updating the background of a specific div element by retrieving data from an SQL database

I have a unique situation where I have a div element with the property set to runat="server" and an ID assigned to it. I am attempting to dynamically set the background image for this specific div from a MySQL database where the path URL is stored in a r ...

mysqlcssasp.netvb.netdynamic-css

Struggling to effectively customize a bootstrap theme

After incorporating a custom .css file from an internet theme that overrides some bootstrap properties, I noticed that it works in certain scenarios. However, when attempting to modify the primary color in the :root{} section of the styles.css file, the ch ...

cssreactjssassreact-bootstrap

Ensure that the navbar remains within the container as you scroll down the page

With the implementation of bootstrap 4, I have successfully integrated a fixed navbar inside a container. Initially, at the top of the page, it occupies the full width, but as soon as I start scrolling, it smoothly transitions into the confines of the cont ...

htmlcss

Implementing a list using display: inline-block without any specified order

Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like: my_cool_function(param0, param1, param2, param3). To accomplish this, I have constructed an unordered lis ...

javascriptjqueryhtmlcss

Add a CSS class to a dropdown menu option in HTML and JavaScript (JQuery) if it has a specified ID

I am brand new to HTML and JQuery, and I'm struggling with setting a class for my select element when the currently selected option has an ID of "answer". This is crucial for checking the correctness of a multiple choice question. If achieving this i ...

javascriptjqueryhtmlcss

Is it acceptable to employ numerous classes simultaneously?

Instead of applying individual styling attributes like background-color and border to each element, I chose to create a set of classes such as red-background, blue-text, and border-1px... Do you think this approach is acceptable or should I try something d ...

css

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

javascriptjqueryhtmlcssviewport

How to align a div with embedded tweets in the center

I am looking to include a series of tweets from Twitter in a div on a basic webpage. The challenge is centering this div horizontally on the page. I have tried using: <div style="text-align:center"> and also: <div style="width: 900px; display ...

htmlcsscentermargin

Use Bootstrap to effortlessly arrange columns horizontally in a row

I'm facing a scenario where I need to arrange the columns in a row horizontally. The challenge is to ensure that the row expands horizontally to fit the columns. I attempted to use white-space: nowrap on the row, remove floats on columns, and set the ...

htmlcsstwitter-bootstrap

Adjust the alignment of two headers with varying sizes

Can someone provide guidance on aligning two headers of different sizes (e.g. h3 and h5) based on their bottom edges, making them appear like a cohesive group in a sentence format? The current code snippet I am working with is as follows: ...

cssmaterial-ui

Issue arising with hover animation on a stable colored background

I recently created my own website and utilized this codepen https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements ...

htmlcss

Displaying HTML elements conditionally in React depending on boolean values

Developing a component that limits the display of text to the first 40 characters, but can show the full description when a Chevron click event is triggered. The goal is to have the content expand in a similar fashion as it currently does with the Accord ...

htmlcssreactjsonclickstyled-components

Rotating Images in 3D with CSS

I am looking for guidance on how to create a rotating image effect on a webpage using CSS/JS. The image should rotate into the plane of the page, similar to the example shown in this post. Can you assist me with this? To better illustrate what I'm tr ...

javascriptcssimageanimationrotation

A mesmerizing Fullscreen CSS Slideshow that creates a stunning double fade in/out effect for overlaid elements on background slide elements

Looking to create a unique slide show using background images and text with specific animations? Check out this jsfiddle. This slideshow features cover background images, displaced text, and button-controlled transitions without auto loop animation. Each ...

htmlcssslideshowcss-transitions

Progress Circles on Canvas in FireFox

Currently, I am experimenting with this codepen demo that utilizes canvas to generate progress circles: The functionality functions perfectly in Chrome and Safari; however, it only displays black circles in FireFox. My knowledge of canvas is limited, so I ...

javascripthtmlcsscanvas