-1

enter image description here I want the navbar to be like this^ solid and the workouts diets to be centralized

enter image description here So I tried to make a navbar but when I added my search bar it made my "Workouts" and "Diets" not centralized. I don't know why this is happening but when I remove my search bar it's fine but when I add it back it moves my list slightly to the left. My navbar is also 'transparent' when I scroll through my website the words just seem to go through the navbar. Why is this happening? Sorry if this question is a little amateur, I just started out HTML and CSS

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: auto
}

.container1 {
  background-color: white;
  border: 1px solid black;
  max-height: 30px;
}

.container2 {
  background-color: white;
  border: 1px solid black;
  max-height: 40px;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

#brand {
  margin: 0;
  padding: 0;
  top: 29px;
  left: 20px;
  font-size: 30px;
  float: left;
  position: fixed;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  font-style: italic;
}

#brand:hover {
  color: white;
  background-color: black;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 2px;
  text-align: center;
}

li {
  color: black;
  display: inline;
}

li a {
  font-family: Roboto, sans-serif;
  font-style: bold;
  padding: 2px;
  font-size: 20px;
}

li a:hover {
  background-color: #111;
  color: white;
}

.search {
  margin: 0;
  padding: 0;
  float: right;
}

#avatar {
  text-align: center;
  margin-top: -3px;
  padding-top: 5px;
}

#avatar1 {
  max-height: 25px;
  max-width: 25px;
}
<head>
<meta charset="UTF-8">
<title>Welcome to Smart Sports!</title>
<link type="text/css" rel="stylesheet" href="Sportshome.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
<link href='navbar.css' rel='stylesheet' type='text/css'>
<div id="navbar">
    <div class="container1">
        <p id="avatar">
        <img src="avatar1.png" id="avatar1">
        </p>
    </div>
    <div class="container2">
        <a href="Sportshome.html" id="brand">Sports. Sweat. Smart.</a>
        <p><input type="text" class="search"></p>
        <ul>
            <li><a href="workout.html">Workouts</a></li>
            <li><a href="diet.html">Diets</a></li>
        </ul>
    </div>
</div>
</head>
Alexio
  • 75
  • 1
  • 11

1 Answers1

0

You can achieve this using flexbox I have updated your CSS and HTML:

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: auto
}

.container1 {
  background-color: white;
  border: 1px solid black;
  max-height: 30px;
}

.container2 {
  background-color: white;
  border: 1px solid black;
  max-height: 40px;
  display: flex;
  align-items: center;
}

.container2 div {
  width: 100%;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

#brand {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  font-style: italic;
}

#brand:hover {
  color: white;
  background-color: black;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 2px;
  text-align: center;
}

li {
  color: black;
  display: inline;
}

li a {
  font-family: Roboto, sans-serif;
  font-style: bold;
  padding: 2px;
  font-size: 20px;
}

li a:hover {
  background-color: #111;
  color: white;
}

.search {
  margin: 0;
  padding: 0;
  float: right;
}

#avatar {
  text-align: center;
  margin-top: -3px;
  padding-top: 5px;
}

#avatar1 {
  max-height: 25px;
  max-width: 25px;
}
<html>


<head>
  <meta charset="UTF-8">
  <title>Welcome to Smart Sports!</title>
  <link type="text/css" rel="stylesheet" href="Sportshome.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
  <link href='navbar.css' rel='stylesheet' type='text/css'>
  <div id="navbar">
    <div class="container1">
      <p id="avatar">
        <img src="avatar1.png" id="avatar1">
      </p>
    </div>
    <div class="container2">
      <div>
        <a href="Sportshome.html" id="brand">Sports. Sweat. Smart.</a>
      </div>

      <div>
        <ul>
          <li><a href="workout.html">Workouts</a></li>
          <li><a href="diet.html">Diets</a></li>
        </ul>
      </div>
      <div>
        <input type="text" class="search">
      </div>
    </div>
  </div>
</head>

Note: Use classes instated of Id's.

Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37