How do I move this search box down?-CodePudding

I'm trying to move the search box down, I already tried adding a margin-top and I also tried adding a padding-top but it won't move. I want it to be positioned vertically in the middle of the blue rectangle. I would also like to change the color of the box and the text to different shades of gray. Help would be much appreciated. Thanks!

header {
    position: fixed; /* Helps us position at the top; header no longer takes up space in the flow of the document */
    top: 0px;
    width: 100%;
    padding: 15px;
    background-color: #693969;
    height: 150px;
    margin: 0;
    opacity: .9;
  }

  header {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
  }

  .topnav {
    overflow: hidden;
    background-color: rgb(68, 71, 125);
    width: 1260px;
    float: right;
  }

  .topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
  }
  
  .topnav a {
    float: right;
    color: #391616;
    text-align: center;
    padding: 20px 40px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: rgb(194, 125, 125);
    color: rgb(100, 77, 77);
  }
  
  .topnav a.nav {
    background-color: none;
    color: rgb(120, 42, 42);
  }

  .search {
    margin-top: 16px;
  }

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="indexx.css">
    </head>
    <body>
        <header>
        <div >
          <a  href="#home">home</a>
          <a  href="#home">home</a>
          <a  href="#home">home</a>
          <a  href="#home">home</a>
          <input  type="text" placeholder="Search...">
</div>
</header>
    </body>
</html>

CodePudding user response：

I have added a basic reset which I recommend each time you're creating any HTML/CSS/JS design. There are libraries you can use in the future but for now this will do fine. Here is my solution:

* { / * This is basic browzer reset */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  position: fixed;
  /* Helps us position at the top; header no longer takes up space in the flow of the document */
  top: 0px;
  width: 100%;
  padding: 15px;
  background-color: #693969;
  height: 150px;
  margin: 0;
  opacity: .9;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

.topnav {
  background-color: rgb(68, 71, 125);
  width: 1260px;
  float: right;
}

.topnav input {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 15px;
  margin-right: 16px;
  font-size: 17px;
  max-width: 100px;
}

.topnav input::placeholder { / * Add the ::placeholder pseudoclass to change color of your placeholder text */
  color: #444444;
}

.topnav a {
  float: right;
  color: #391616;
  text-align: center;
  padding: 20px 40px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: rgb(194, 125, 125);
  color: rgb(100, 77, 77);
}

.topnav a.nav {
  background-color: none;
  color: rgb(120, 42, 42);
}

.search {
  margin-top: 16px;
}

<header>
  <div >
    <a  href="#home">home</a>
    <a  href="#home">home</a>
    <a  href="#home">home</a>
    <a  href="#home">home</a>
    <input  type="text" placeholder="Search...">
  </div>
</header>

A few things to mention, you're using a few unnecessary floats, I would suggest reading up on the current modern solutions; Flexbox & CSS Grid. You'll make your life much easier in terms of designing layouts

Flexbox

CSS Grid

CodePudding user response：

update the following css

.topnav {
    overflow: hidden;
    background-color: rgb(68, 71, 125);
    width: 1260px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-right: 16px;
    font-size: 17px;
    margin: 0;
}

CodePudding user response：

You can have it, hope it helps

/* header */
.container-fluid{ padding-left: 15px; padding-right: 15px; }
.d-flex{ display: flex; }
.justify-content-end { justify-content: flex-end ; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

header {width: 100%;height: 130px;position: fixed;left: 0;top: 0;z-index: 9;-webkit-box-shadow: 0px 2px 9px rgb(0 0 0 / 9%);-moz-box-shadow: 0px 2px 9px rgba(0,0,0,0.09);box-shadow: 0px 2px 9px rgb(0 0 0 / 9%);background: #fff; font-family: 'Roboto', sans-serif; }
header .header-inner{ margin-top: 15px; padding-left:15px; padding-right:15px; height: 80px; background-color: #D9DEDF; color: #606A71; font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; }

header nav { margin-right: 15px; }
header nav ul{ list-style-type: none; padding: 0; margin: 0;}
header nav ul li{  font-size: 14px; line-height: 17px; list-style: none; padding:0 ; margin: 0 1px; color: #131516; background-color: inherit; }
header nav ul li a{ color: #131516; background-color: inherit; padding: 15px; text-decoration: none; }
header nav ul li a:hover{ color: #131516; background-color: #F2F3F4; padding: 15px; }

.form-control{ display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #212529;background-color: #fff;background-clip: padding-box;border: 1px solid #89979B;-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0.25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap" rel="stylesheet">

  <link href="css/custom.css" rel="stylesheet">
  <title>Hello, world!</title>
</head>

<body>
  
  <header>
    <div >
      <div >
        <nav>
          <ul >
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
          </ul>
        </nav>

        <input type="text" >

      </div>
    </div>
  </header>
</body>

</html>

Or check in jsfiddle example link :

https://jsfiddle.net/DeveloperSandip/fer3o9nd/3/