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

Unterstützung
8

That worked perfectly, @Johani! Thank you so much for your help, and also @Stranik for pointing me in the right direction.

I’ve made some slight tweaks but now have a perfectly synchronous global navigation header that is fixed and consistent between my Discourse community and my Wordpress Site! The navigation links are perfectly spaced, thanks to Joe! And the header nav bar is mobile responsive so as you scale the screen down, it will only show the font-awesome icons for each heading link. This is exactly what I wanted! I’ll share my code below and hope this helps someone else who’s looking to do something similar ツ

Here’s what it looks like in the wild ➞ WP (left) and Discourse (right)

2018-10-12_15-10-11
2018-10-12_15-10-111184×1022 430 KB
2018-10-12_15-10-31
2018-10-12_15-10-311184×1022 90.2 KB

Here’s my final code in Discourse…

CSS:

// Discourse header
.d-header {
  top: 45px; // 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 6px 0px #194d41;
  justify-content: space-evenly;
}

// styles for links
.navbar a {
  color: white;
  font-size: 14px;
  height: 45px; // 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.grn:hover {
  background-image: linear-gradient(#3aae93, #206051);
}
.navbar a.red:hover {
  background-image: linear-gradient(#da3e6a, #961d3f);
}

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

HTML:

<div class="navbar">
    <a class="red" href="https://jewelbound.com"><i style="margin-top: -2px;" class="fa fa-home"></i><span>&nbsp; Home</span></a> 
    <a class="grn" href="https://community.jewelbound.com"><i style="margin-top: -3px;" class="fa fa-comments"></i><span>&nbsp; Community</span></a> 
    <a class="red" href="https://jewelbound.com/courses"><i style="margin-top: -1px;" class="fa fa-edit"></i><span>&nbsp; Courses</span></a> 
    <a class="red" href="#"><i style="margin-top: -1px;" class="fa fa-star"></i><span>&nbsp; Resources</span></a>
    <a class="red" href="https://jewelbound.com/events/"><i style="margin-top: -3px;" class="fa fa-calendar"></i><span>&nbsp; Events</span></a>
</div>

And here is the code I used in the Wordpress Site…

CSS:

/* Style the navigation bar */
#masthead {
    margin-top: 45px; /* should match link height */
    position: fixed;
    z-index: 10;
}

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

/* styles for custom header */
.navbarr {
  position: fixed;
  background-image: linear-gradient(#da3e6a, #961d3f);
  z-index: 1001;
  box-shadow: 0 1px 6px 0px #561024;
  justify-content: space-evenly;
}

/* styles for links */
.navbarr a {
  color: white;
  font-size: 14px;
  height: 45px; /* set desired link height */
  justify-content: center;
  border-right: 1px solid #efa9bd;
}

#navbarr-font {
  font-size: 14px !important;
}

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

/* styles for links on mouse-over */
.navbarr .comm-grn:hover {
  background-image: linear-gradient(#3aae93, #206051);
  color: white;
}
.navbarr .site-red:hover {
  background-image: linear-gradient(#c12551, #561024);
  color: white;
}


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

HTML ➞ Appearance > Editor > header.php

<div class="navbarr">
	<a class="site-red" href="https://jewelbound.com"><i style="margin-top: -2px;" class="fa fa-home"></i><span id="navbarr-font">&nbsp; Home</span></a> 
    <a class="comm-grn" href="https://community.jewelbound.com"><i style="margin-top: -3px;" class="fa fa-comments"></i><span id="navbarr-font">&nbsp; Community</span></a> 
    <a class="site-red" href="https://jewelbound.com/courses"><i style="margin-top: -2px;" class="fa fa-edit"></i><span id="navbarr-font">&nbsp; Courses</span></a> 
    <a class="site-red" href="https://jewelbound.com/"><i style="margin-top: -1px;" class="fa fa-star"></i><span id="navbarr-font">&nbsp; Resources</span></a>
    <a class="site-red" href="https://jewelbound.com/events/"><i style="margin-top: -3px;" class="fa fa-calendar"></i><span id="navbarr-font">&nbsp; Events</span></a>
</div>
7 „Gefällt mir“