I'm looking to replicate the header design of the classic olx website. Is there anyone who can guide me on how to extend the search bar to match the original image?

Could use some help stretching my search input field to match the original picture. Any tips or suggestions on how to achieve this? I'm utilizing bootstrap and react.js for this project. Uploaded are the original image and my resulting image for comparison, along with the corresponding HTML and CSS code. Despite trying several methods, I haven't been successful in achieving the desired outcome.

Original https://i.sstatic.net/IBJz9.png

My Resulthttps://i.sstatic.net/lCnag.png

HTML & CSS

.logo {
  width: 50px;
  margin-right: 20px;
}

.logo img {
  width: 100%;
}

.location {}

.location input {
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.location .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}


.search {}

.search input {
  width: 100px;
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.search .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}

.sell {
  padding: 8px 20px;
  border: 3px #ffa500 solid;
  color: #002f34;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 3px 5px #a9a9a9;
}

.login {
  padding-right:10px;
  text-decoration: underline;
  font-size: 18px;
  font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a4bba4a4b1a6fabea794e5fae5e2fae5">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand logo" href="#">
        <img src={require("../ui/logo.png")} />
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

            <div class="input-group input-group-lg location mr-4">
                <input type="text" class="form-control" placeholder="Pakistan" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </div>

            <div class="input-group input-group-lg search">

                <input type="text" class="form-control" placeholder="Find Mobile, Car ,laptop" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </div>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <h6 class="mr-sm-2 login" >Login</h6>
            <button class="my-2 my-sm-0 fas fa-plus sell">&nbsp; SELL</button>
        </form>
    </div>
</nav>

htmlcssinput

Answer №1

The initial step was to swap out your div with a ul for li.

Subsequently, I defined the following two classes:

.flex-1{
  flex: 1;
}
.flex-2{
  flex: 2;
}

To regulate the flex size of the element.

I assigned flex-2 to ul & second li. And flex-1 to the first li.

In order for the demo to function properly, I replaced className with class. You might need to revert these changes to ensure functionality.

DEMO (view in full page)

.logo {
  width: 50px;
  margin-right: 20px;
}

.logo img {
  width: 100%;
}

.location {}

.location input {
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.location .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}


.search {}

.search input {
  width: 100px;
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.search .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}

.sell {
  padding: 8px 20px;
  border: 3px #ffa500 solid;
  color: #002f34;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 3px 5px #a9a9a9;
}

.login {
  padding-right:10px;
  text-decoration: underline;
  font-size: 18px;
  font-weight: bold;
}
.flex-1{
  flex: 1;
}
.flex-2{
  flex: 2;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand logo" href="#">
        <img src={require("../ui/logo.png")} />
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav flex-2 pr-3">

            <li class="input-group input-group-lg location mr-4 flex-1">
                <input type="text" class="form-control" placeholder="Pakistan" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </li>

            <li class="input-group input-group-lg search flex-2">

                <input type="text" class="form-control" placeholder="Find Mobile, Car ,laptop" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <h6 class="mr-sm-2 login" >Login</h6>
            <button class="my-2 my-sm-0 fas fa-plus sell">  SELL</button>
        </form>
    </div>
</nav>

Answer №2

To achieve this layout, you can utilize the power of flexbox.

  1. One approach is to nest your content within a bootstrap row and use col classes to define the width of each column. With 12 columns available, you can allocate 2 columns for the country section, 2 columns for login and sell sections, and the remaining 8 columns for the input field.
  2. Another method is to craft custom CSS where the parent div has a display property set to flex. Then, apply flex properties to the child items to control their individual widths within the space available.

If you want to dive deeper into web layout techniques, I suggest exploring resources like MDN.

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

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Are you searching for the origin of a dynamic dropdown widget or database?

Currently, I am browsing through and I have a query regarding accessing all available classes/options for the courses in a semester. There is a class locator on the top left of the page with a dynamic drop-down menu. Can anyone suggest how I can access ...

javascripthtmldatabase

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

javascripthtmljquerycssajax

Personalize the HTML <input> tag using the attribute type="file"

Within the React site, there is a field where users can select a file from their computer and view the file path. To achieve this functionality, I used an HTML input with type="file"... <div className="inline-flex w-full justify-between&q ...

htmlcssreactjsinputtailwind-css

modify the color of a particular div element in real-time

I am looking to dynamically change the color of the divs based on values from my database. Here is what I have so far: Database: shape id is_success id1 0 id2 1 id3 0 id4 1 <div class="container" style="background: black; widt ...

javascriptphpjqueryhtmlajax

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

If you have already implemented the useState and useEffect Hooks for maintaining previous state, another approach is to utilize the useRef Hook to track previous state values as well. ...

javascriptjavahtmlcssreactjs

Press a single button to toggle between displaying and hiding the table

$(document).ready(function() { $("#t1").hide(); // hide table by default $('#sp1').on('click', function() { $("#t1").show(); }); $('#close').on('click', function() { $("#t1").hide(); }); }); <li ...

javascripthtmlcssbootstrap-4

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Trying to fetch an external HTML file and convert its body content into a string has been giving me unexpected results. Is there a way to achieve this successfully? var xhr = new XMLHttpRequest(); function loadFile(){ xhr.open("GET", 'index.html ...

javascripthtmljsonxmlhttprequeststringify

Managing form submissions using Jquery and checkboxes

Whenever I submit my dynamically created form, all checkboxes briefly become selected for a split second. Does anyone have an explanation for this behavior? Is it common or is there something wrong with my code? Although the form submits correctly, it migh ...

javascriptjqueryhtmlcssforms

What is the best way to alter the font size in an SVG?

I have incorporated an SVG icon into my website and obtained the following code from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9, ...

htmlcsssvgicons

A guide to customizing the label color in Material-UI's <TextField/> component

How do I change the text color of the "email" label to match the border color? Below is the provided code: import React, { Component } from "react"; import { Icon } from "semantic-ui-react"; import { Divider } from "semantic-ui-react"; import { TextField ...

cssreactjsmaterial-ui

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Scale first, then drag and drop to fix a faulty registration

I'm currently working on a project that involves dragging and dropping the correct items onto a technical drawing, such as a motherboard. The user is presented with pictures of components like CPUs or DDR memory and must drag these items to their corr ...

jquerycssdrag-and-dropresponsive-designjquery-ui-draggable

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the <link rel="stylesheet" href="style.css"> command, where style.css is the name of the file. However, for some reason, it wasn't working ...

htmlcssdebugginglinker

What could be causing the issue with Hindi text not displaying properly on Safari?

I'm having trouble with displaying Hindi text on my website. I tried pasting the text in a new file and it worked, so why is it not loading correctly in this case? The Hindi script is within the second span with the class word w2. "use strict"; le ...

javascripthtmlcssbrowsersafari

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

I need help creating a navbar that displays the active site using HTML and JS code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=& ...

javascripthtmljquerycss

Positives and negatives images for accordion menu

I have successfully created an accordion list using HTML, CSS, and JavaScript. However, I would like to enhance it by adding a plus and minus picture in the left corner of the heading. Is there a way to achieve this functionality? I have two images that I ...

javascripthtmlcssaccordion

What is the best way to make just the background image transparent using HTML and CSS?

Hey there! I'm trying to make just the background image transparent, while leaving everything else non-transparent. Is this possible with Bootstrap? Here's a snippet of my HTML: HTML Section: <!-- Homepage Section --> <section id= ...

htmlcsstwitter-bootstrapbackgroundopacity

if the input field is empty, eliminate the class

Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...

jqueryhtmlcss

Selecting parent class using JQuery

This is some HTML I have: <label class="rlabel">First Name</label> <input class="rinput" type="text" placeholder="Fisrt Name" required /> <label class="rlabel">Last Name</label> <input class="rinput" type="tex ...

jquerycss