Breaking News: Grepper is joining You.com. Read the official announcement!

navbar css grid

marktecher.com answered on November 14, 2022 Popularity 8/10 Helpfulness 4/10

answer navbar css grid

navbar css grid

Comment

<!-- The HTML part is on the bottom
to play with the code check the codepen version in the source url
Please not that was small responsive bug on the original code which is
fixed in this version. You can paste this version into the codepen.
-->
<style>
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
  margin: 0;
}

nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1em;
  align-items: center;
  text-align: center;
  border-bottom: 4px solid black;
  background: green;
}

@media screen and (max-width: 900px) {
  nav {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 1em;
 }
}  

.1 {
  grid-column: 1;
}

.2 {
  grid-column: 2;
}

.logo {
  grid-column: 3;
}

.logo {
  background-image: url("https://blog.codepen.io/wp-content/uploads/2012/06/Black-Large.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 10vh;
}

.3 {
  grid-column: 4;
}

.4 {
  grid-column: 5;
}

.navLinks {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

.navLinks:hover {
  color: white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  padding: 1em 1em;
}

#twist {
  color: blue;
}
</style>
<!-- -->
<header>
  <nav>
    <div class="1">
    <a href="#" class="navLinks">Home</a>
    </div>
    <div class="2">
    <a href="#" class="navLinks">About Me</a>
    </div>
    <div class="2">
      <div class="logo">
      </div>
    </div>
    <div class="3">
    <a href="#" class="navLinks">Portfolio</a>
    </div>
    <div class="4">
    <a href="#" class="navLinks">Contact Me</a>
    </div>
  </nav>
</header>

Popularity 8/10 Helpfulness 4/10 Language html

Source: codepen.io

Tags: css-grid html navbar

Link to this answer
Share Copy Link

Contributed on Nov 14 2022

marktecher.com

0 Answers Avg Quality 2/10

navbar css grid

Contents

More Related Answers

navbar css grid

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.