Logo and Nav Bar

In this example below you will see how to do a Logo and Nav Bar with some HTML / CSS and Javascript

Inline logo and nav bar which changes to stacked blocks once the user reaches tablet size.

Thumbnail
This awesome code was written by MeredithU, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MeredithU ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Logo and Nav Bar</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
  <div><h1>Cool Logo</h1></div>
  <nav>
    <a>Home</a>
    <a>About</a>
    <a>Work With Me</a>
    <a>Contact</a>
    <a>Blog</a>
  </nav>
</header>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MeredithU/logo-and-nav-bar-FwejD */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

header {
  text-align: justify;
  letter-spacing: 1px;
  padding: 2em 5%;
  background: #355e91;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Noto Sans', sans-serif;
}

header::after {
  content: '';
  display: inline-block;
  width: 100%;
}

header > div,
header > div::before,
header > div h1, 
header nav {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  line-height: 1.8em;
}

header > div {
  height: 100%;
}

header > div::before {
  content: '';
  height: 100%;
}

header nav a {
  padding: 0 0.6em;
  white-space: nowrap;
}

header nav a:last-child {
  padding-right: 0;
}

header h1:hover, 
header nav a:hover {
  color: #a593a1;
  cursor: pointer;
}


@media screen and (max-width: 768px) {
  header {
    height: auto;
  }
  
  header > div,
  header > div h1,
  header nav {
    height: auto;
    width: auto;
    display: block;
    text-align: center;
  }
}

Comments