Add web-property-wide navigation buttons to the top


#1

People are going to get linked to this forum sometimes, even when they’re not familiar with Rust. If they want to know about it, the natural choice is to click the logo in the header to go to the home page. The forum’s home page still doesn’t tell you what Rust is, nor does the pinned announcement at the top, but we probably do want the forum to primarily serve as a place for people who’re already trying to use Rust.

What we really want is for newbies to end up on the home page. It’s possible, using the “Customization” options, to add navigation options to the top of the forum, probably a duplicate of the nav items on the main page with “Community” highlighted to put u.r-l.o into context.


#2

We should definitely do this!


#3

Okay, here’s how I did it on https://forum.bors.tech/

  1. Go into the Admin / Customize / Themes section, and make a new theme to attach the header to. You’re going to make it the forum’s default theme when you’re done, but you want to test it first.

  1. Click the Edit CSS/HTML button.

  2. Paste this into the “Custom CSS” box:

/* =============== Rust Header Menu CSS ================= */

span#rust-top-links {
    display: block !important;
    margin: 5px auto 0 auto;
    max-width: 1110px;
}
div#rust-navbar {
    z-index: 1040;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
body[class*="archetype-"] #rust-navbar {
    position: absolute;
}
.rust-nav-link-container li {
    display: inline-block;
    float: left;
}
.rust-nav-link-container a {
    text-decoration: none;
    color: #428bca;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    padding: 1em;
}
.rust-nav-link-container a.active {
    font-weight: bold;
}
.rust-nav-link-container a:hover,
.rust-nav-link-container a:active,
.rust-nav-link-container a:focus {
    text-decoration: underline;
    color: #2a6496;
}
.rust-nav-link-container {
    display: block;
    overflow: hidden;
    margin-left: 60px;
    position: absolute;
}
@media screen and (max-width: 800px) {
    .js div#rust-navbar {
        position: static;
        margin-top: -1em;
        margin-bottom: 1em;
    }
    .rust-nav-link-container {
        position: static;
        margin-left: 0;
    }
}
  1. Paste this into the “After Header” box:
<div id="rust-navbar">
<span id="rust-top-links">
<ul class="rust-nav-link-container">
   <li><a href="//www.rust-lang.org/en-US/">Home</a></li>
   <li><a href="//www.rust-lang.org/en-US/documentation.html">Documentation</a></li>
   <li><a href="//www.rust-lang.org/en-US/install.html">Install</a></li>
   <li><a href="//www.rust-lang.org/en-US/community.html" class="active">Community</a></li>
   <li><a href="//www.rust-lang.org/en-US/contribute.html">Contribute</a></li>
</ul></span>
</div>
  1. After Saving it, you can click the “Preview” link to check out how it looks. You can customize this code to taste (it should be usable as-is, but it’s up to you).

  2. Go back to the main Theme Customization screen and make your new theme selectable by users and the default theme.