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

[jord8on (Jordan)]

tl;dr

1. I’ve been working on a global navigation bar that I want to sit above the Main Discourse Menu. I want to be able to use this same code to place this exact same menu atop my Wordpress Main Menu; seamless UX.
2. I need help getting my header to be fixed, above the discourse main menu
3. When I have my 5 links spaced at 20%, the last one wraps to the next line but when I have it set to 19.8% it doesn’t wrap. How can I optimize the spacing/width in my code?

---

I like the respective search tools and other parts of the main headers in both WP and Discourse so I’ve decided to keep those intact beneath my custom navbar. But I want to make it easy for my users to get between my LMS (via WP) and the community discussions in Discourse. I’ve designed my HTML/CSS to hide the text for each button, for mobile devices, making it feel more like an application.

I tried to follow the advice offered in a few forums here like the “Best way to customize the header” topic, but I can’t figure out why my nav bar seems to be sitting behind the main discourse nav bar.

I also want the navbar to be sticky so that it remains at the top of the screen, so that when a user scrolls down, they will always see this navbar at the top of their screen.

Here’s a GIF showing what’s happening when I refresh my screen…
Here’s my live site (a big WIP right now )

Here’s my current HTML/CSS that I’ve placed within the “Customize” admin ui…

HTML:

<div class="navbar"> <a class="rt-border" href="https://jewelbound.com"><i class="fa fa-fw fa-home"></i><span> Home</span></a> <a class="rt-border" href="https://community.jewelbound.com"><i class="fa fa-fw fa-comments"></i> <span>Community</span></a> <a class="rt-border" href="https://jewelbound.com/courses"><i class="fa fa-fw fa-edit"></i><span> Courses</span></a> <a class="rt-border" href="#"><i class="fa fa-fw fa-star"></i> <span>Resources</span></a> <a href="#"><i class="fa fa-fw fa-calendar"></i><span> Events</span></a> </div> 

CSS:

/* Style the navigation bar */ .navbar { margin: 0; width: 100%; position: fixed; line-height: 50px; background-color: #B7234C; } /* Navbar links */ .navbar a { float: left; text-align: center; color: white; text-decoration: none; font-size: 1.1em; width: 19.8%; } .rt-border { border-right: 2px solid #d6295a; } /* Navbar links on mouse-over */ .navbar a:hover { background-color: #961d3f; } /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than the number of pixels defined here */ @media screen and (max-width: 940px) { .navbar{ display: flex; } .navbar span{ display: none; } } 

[Stranik (Evgeny)]

If I understand correctly, maybe you have an error in

.navbar { 

See an example, for example here:

https://meta.discourse.org/t/best-way-to-customize-the-header/13368/50?u=stranik

Just tried to copy a few properties, and here’s what happened.

[jord8on (Jordan)]

Thanks for directing me back to that thread @Stranik! I found something here that I didn’t see the first time which helped me get closer to a final solution!!

I added the following to my original CSS:

.d-header { margin-top: 45px; position: fixed; } #main { padding-top: 45px; } 

I also added a z-index: 1001; to my .navbar

Almost everything seems to be working as expected now!

The one problem I’m still having is with my CSS and how to style .navbar and/or my .navbar a so that my elements are centered and equally spaced on the line. Currently I have my elements styled to float: left; but I just want that whole group of buttons to be centered.

Any suggestions?

Here’s why I want to fix this (notice the extra space leftover on the right…

[jord8on (Jordan)]

Hello @Johani! Your answer on another thread inspired me and helped me get closer to my goal of having a sticky navigation at the top of my site. I’ve got it working now, but was hoping you could take a look at my CSS on my header and offer any feedback on my last post. For some reason, I can’t get the elements centered and evenly spread across my navbar.

My CSS:

/* Style the navigation bar */ .d-header { margin-top: 45px; position: fixed; } #main { padding-top: 45px; } .navbar { margin: 0; width: 100%; position: fixed; line-height: 45px; background-image: linear-gradient(#66ccb4, #2d8671); z-index: 1001; box-shadow: 0 1px 4px 0px white; } /* Navbar links */ .navbar a { float: left; text-align: center; color: white; text-decoration: none; font-size: 1.1em; width: 19.8%; } .rt-border { border-right: 1px solid #c6ece3; } /* Navbar links on mouse-over */ .navbar a:hover { background-image: linear-gradient(#3aae93, #206051); } /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than the number of pixels defined here */ @media screen and (max-width: 800px) { .navbar{ display: flex; } .navbar span{ display: none; } } 

[Johani (Joe)]

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; } } 

[jord8on (Jordan)]

Wow @Johani! That worked great on my Discourse installation! Unfortunately when I tried to apply it to my Wordpress site, it broke my header, so I’ve had to revert back to my old code .

I can see how flexbox would be the best practice here, but I’m wondering if there’s a way to hack the code i’m currently using because that code is working and perfectly matched on my WP site.

[Johani (Joe)]

I see what’s going on. The code I posted earlier was SCSS which Discourse supports but WordPress does not. I’ve edited my post to add compiled CSS instead of SCSS. Try again and let me know if you’re still having trouble.

[jord8on (Jordan)]

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)

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>