skip to Main Content

I’m working on the header for a website. My logo is on the right side, I want to put my search bar on the left. I’m coding in css and am trying to use flexbox.

I’ve tried a lot of things. Here’s my html:

 <body>
      <header>
        <div class="logo">
          <logo picture/>
        </div>
        <div class="search-set">
            <form id="s-bar-holder" role="search">
              <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
            </form>
        </div>
        <div></div>
      </header>
      <main></main>
    </body>

Here’s my css:

header {
    display: flex;
    background-color: rgb(78,78,78);
    margin-top: -8px;
    margin-left: -7px;
    margin-right: -8px;
    height: 60px;
    width: auto;
    
     
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-set {
    display: flex;
    align-self: flex-end;
}
#search-bar {
    background-color: rgb(78,78,78);
    border: none;
    color: rgb(230,230,230);
    outline: none;
    height: 58px;
    width: 200px;
    display: flex;
    justify-content: wrap;

Thanks.

2

Answers


  1. header { display: flex; background-color: rgb(78, 78, 78); margin-top: -8px; margin-left: -7px; margin-right: -8px; height: 60px; width: auto; flex-direction: row-reverse; justify-content: space-between; }

    Login or Signup to reply.
  2. I tried to make header section something similiar what you want.
    Please go through the code and run snippet on full page.

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); 
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
      }
    
    body{
        background: rgb(235, 235, 235);
        
      }
    header {
        display: flex;
        background-color: rgb(78,78,78);
        height: 60px;
        width: auto;    
    }
    
    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .logo p{
        font-size: 30px;
        font-weight: 800;
        margin: 5px;
        margin-right: 50px;
    }
    
    #search-bar {
        background-color: rgb(78,78,78);
        border: none;
        color: rgb(230,230,230);
        outline: none;
        height: 58px;
        display: flex;
        justify-content: wrap;
        margin-left: 50px;
    }
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="q4.css" />
        <title>Flexbox</title>
      </head>
      <body>
        <header>
        <div class="container">
            <div class="search-set">
                <form id="s-bar-holder" role="search">
                  <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
                </form>
            </div>
    
            <div class="logo">
                <p>LOGO</p>
            </div>
            
        </div>
        </header>
      </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search