How to align header items with HTML and SCSS

user_12770889 0
Viewed 828

I'd like to align the h1 element with the nav element in the header. Right now they appear in two different lines. enter image description here

fiddle

header {
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
align-items: center;
}
sass css html
5 Answers

Change your .header ul and nav css property with flexbox.

header {
  align-items: center;
  background-color: #F4C724;
  display: flex;
  flex-direction: row;
  color: white;
  text-transform: uppercase;
  width: 100%;
  @media (max-width: 767px){
    flex-direction: column;
  }
}
ul {
  display: flex;
  flex-directon: row;
  justify-content: flex-end;
  margin: 0;
  li {
    display: inline-block;
    /*remove browser default settings with 0 for both margin and padding*/
    &:not(:last-child){
      margin-right: 25px;
    }
  }
}
nav {
  margin-left: auto;
  padding-right: 15px;
}

Design will like this.

How it will look like

SCSS is modifyed.

* {
  margin: 0;
  padding: 0;
  //i don't want the default margin and padding settings because it messes with the position of things
}

header {
  align-items: center;
  background-color: #F4C724;
  display: flex;
  flex-direction: row;
  color: white;
  text-transform: uppercase;
  width: 100%;
  @media (max-width: 767px){
    flex-direction: column;
  }
}

h2 {
  color: black;
  margin-bottom: 20px;
}

body {
  background-image: url("../img/growing.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  //you have to include two dots so the machine looks for the file outside of the css file
  //it doesn't repeat the img over and over again as the body content extends
  //background-size will size the img to the screen appropropriately
}

ul {
  display: flex;
  flex-directon: row;
  justify-content: flex-end;
  margin: 0;
  li {
    display: inline-block;
    /*remove browser default settings with 0 for both margin and padding*/
    &:not(:last-child){
      margin-right: 25px;
    }
  }
}
nav {
  margin-left: auto;
  padding-right: 15px;
}
h1 {
  font-family: 'Teko', sans-serif;
  color: white;
  border: none;
  width: 32%;
  text-align: center;
  span {
    color: #218c74;
  }
}
.nav-link {
  text-decoration: none;
  color: #218c74;
  font-weight: bolder;
  font-size: 12px;
  &:hover {
    color: white;
  }
}
.hero {
  text-align: center;
  width: 50%;
  color: black;
  padding: 20px;
  p {
  text-align: justify;
  //justify reorders all the text to fit in the box evenly
  }
}
user_36041880

There were few things you need to modify so I did behalf of you:

View it in full page for the correct alignment.

Observations:

  1. You don't have to declare code like this:

     ul {
  li {
    display: inline-block;
   margin-right: 60px;    
 }
}

It should be something like this:

  ul li {
       display: inline-block;
       margin-right: 60px; 
    }

  1. The reason it was in 2 lines because both the h1 size and the nav bar width were congested so, you have to increase the width of the h1.

  2. I also see there were wrong comments used in CSS file use a correct one, ideally you should use something like this /* .... */

* {
  margin: 0;
  padding: 0;
}

header {
  background-color: #F4C724;
  color: white;
  text-transform: uppercase;
  width: 100%;
}

h2 {
  color: white;
}

body {
  background-image: url("../img/growing.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}

ul li {
  display: inline-block;
  margin-right: 60px;
}

nav {
  float: right;
  vertical-align: middle;
}

#leftContent {
  width: 60%;
}

h1 {
  font-family: 'Teko', sans-serif;
  color: white;
  border-style: solid;
  text-align: center;
}

span {
  color: #218c74;
}

.nav-link {
  text-decoration: none;
  color: #218c74;
  font-weight: bolder;
  font-size: 12px;
  &:hover {
    color: white;
  }
}

.hero {
  text-align: center;
  width: 50%;
  color: white;
  p {
    text-align: justify;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="">
  <title>Grow Plants</title>
</head>

<body>
  <header>
    <div id="leftContent">
      <h1>How to <span>Grow Plants</span></h1>
    </div>


    <nav>
      <ul>
        <li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
        <li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
        <li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
        <li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
        <li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h2>Every Man Falls in Love with Mary Jane</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</body>

</html>

user_35643590

Use flexbox: 

header {
display: flex;
background-color: #F4C724;
color: white;
text-transform: uppercase;
width: 100%;
align-items: center;
}
user_131187780

Assign classes to the h1 and nav elements:

 <h1 class="header_title">How to <span>Grow Plants</span></h1>

      <nav class="header_nav">
        <ul>
          <li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
          <li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
          <li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
          <li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
          <li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
        </ul>
      </nav>

In the CSS, remove the width from the h1, and add: 

.header_title{
  width: 25%;
  float:left;
  background-color: green;
}
.header_nav{
  width: 65%;
  float:left;
  background-color: blue;
}

an even better solution would be to create a wrapping div elements around the h1 and nav, with specific IDs, and then size them and float them. Although it is not correct to have multiple h1 elements on a single page, it is possible, and you can have multiple navs. So start your work now, by partitioning your code into well defined sections, that if you have to make changes in the future, it will be easier.

user_19336570 
Flex solved the problem:


* {
  margin: 0;
  padding: 0;
  //i don't want the default margin and padding settings because it messes with the position of things
}

header {
  background-color: #F4C724;
  color: white;
  text-transform: uppercase;
  width: 100%;
  display: flex;
  justify-contant: space-between;
  align-items: center;
}

h2 {
  color: white;

}

body {
  background-image: url("../img/growing.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  //you have to include two dots so the machine looks for the file outside of the css file
  //it doesn't repeat the img over and over again as the body content extends
  //background-size will size the img to the screen appropropriately
}

ul {
  li {
    display: inline-block;
    margin-right: 60px;
    /*remove browser default settings with 0 for both margin and padding*/
  }
}
nav {
  flex: 0 0 50%;
  max-width: 50%;

}
h1 {
  font-family: 'Teko', sans-serif;
  color: white;
  border-style: solid;
  width: 32%;
  text-align: center;
  span {
    color: #218c74;
  }
}
.nav-link {
  text-decoration: none;
  color: #218c74;
  font-weight: bolder;
  font-size: 12px;
  &:hover {
    color: white;
  }
}
.hero {
  text-align: center;
  width: 50%;
  color: white;
  p {
  text-align: justify;
  //justify reorders all the text to fit in the box evenly
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="">
  <title>Grow Plants</title>
</head>

<body>
  <header>

      <h1>How to <span>Grow Plants</span></h1>

      <nav>
        <ul>
          <li class="navbutton"><a class="nav-link" href="html/seedling.html">Seedling</a></li>
          <li class="navbutton"><a class="nav-link" href="html/germination.html">Germination</a></li>
          <li class="navbutton"><a class="nav-link" href="html/vegetative.html">Vegetative</a></li>
          <li class="navbutton"><a class="nav-link" href="html/flowering.html">flowering</a></li>
          <li class="navbutton"><a class="nav-link" href="html/about.html">About</a></li>
        </ul>
      </nav>
  </header>
  <section class="hero">
    <h2>Every Man Falls in Love with Mary Jane</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</body>

</html>

user_108740880
Related