Create a responsive global navigation header (Linking between Discourse and WP)

Suporte
5

You were pretty close, I suggest using flexbox since it’s very good at sizing elements automatically.

Something like this:

// Discourse header
.d-header {
  top: 3em; // should match link height
  position: fixed;
}

#main-outlet {
  padding-top: 8.8572em; // 5.8572 default padding + 3em link height
}

.navbar,
.navbar a {
  display: flex;
  align-items: center;
  width: 100%;
}

// styles for custom header
.navbar {
  position: fixed;
  background-image: linear-gradient(#66ccb4, #2d8671);
  z-index: 1001;
  box-shadow: 0 1px 4px 0px white;
  justify-content: space-evenly;
}

// styles for links
.navbar a {
  color: white;
  font-size: 1.1em;
  height: 3em; // set desired link height
  justify-content: center;
  border-right: 1px solid #c6ece3;
}

// remove border from last link
.navbar a:last-of-type {
  border-right: none;
}

// styles for links on mouse-over
.navbar a:hover {
  background-image: linear-gradient(#3aae93, #206051);
}

// add responsiveness 
@media screen and (max-width: 800px) {
  .navbar span {
    display: none;
  }
}
5 curtidas