Custom nav header like discourse.org

themes

(axil) #1

Continuing discussion from “Best way to customize the header”:

Go to admin/customize/css_html and add a new customization. You can remove target="_blank" if you don’t want the link to open in a new window. You might not need all the css, but I leave it there as it is what https://discourse.org has :wink:

Screens

Here’s how it looks when you copy paste the code below.

And how it looks after some more tweaking to match our theme.

Code

Header

<nav id="bar">
    <ul>
        <li><a class="nav-link grey" href="https://example.com/link1" target="_blank">Link1</a></li>
        <li><a class="nav-link orange" href="https://example.com/link2" target="_blank">Link2</a></li>
        <li><a class="nav-link green" href="https://example.com/link3" target="_blank">Link3</a></li>
        <li><a class="nav-link yellow" href="https://example.com/link4" target="_blank">Link4</a></li>
        <li><a class="nav-link blue" href="https://example.com/link5" target="_blank">Link5</a></li>
    </ul>
</nav>

Stylesheet

nav ul { 
    text-align: center;
}

nav ul li { 
    display: inline-block;
}

a:hover {
    transition: color 150ms ease-out 0s;
    color: rgb(44, 174, 195);
}

a {
    transition: color 150ms ease-out 0s;
    color: rgb(35, 137, 153);
}

nav#bar {
    width: 100%;
    height: 48px;
    background: #1b1f20;
    top: 20;
    z-index: 1;
}

nav#bar a.nav-link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    line-height: 48px;
    min-width: 90px;
    font-size: 16px;
    float: left;
}

nav#bar a.red.selected {
  color: #d13332;
  border-color: #d13332 !important; }

nav#bar a.red:hover {
  color: #d13332;
  text-shadow: 0px 0px 5px #d13332; }

nav#bar a.orange.selected {
  color: #ea5932;
  border-color: #ea5932 !important; }

nav#bar a.orange:hover {
  color: #ea5932;
  text-shadow: 0px 0px 5px #ea5932; }

nav#bar a.yellow.selected {
  color: #fff9ae;
  border-color: #fff9ae !important; }

nav#bar a.yellow:hover {
  color: #fff9ae;
  text-shadow: 0px 0px 5px #fff9ae; }

nav#bar a.green.selected {
  color: #18b159;
  border-color: #18b159 !important; }

nav#bar a.green:hover {
  color: #18b159;
  text-shadow: 0px 0px 5px #18b159; }

nav#bar a.blue.selected {
  color: #00aeef;
  border-color: #00aeef !important; }

nav#bar a.blue:hover {
  color: #00aeef;
  text-shadow: 0px 0px 5px #00aeef; }

nav#bar a.grey.selected {
  color: #aaa;
  border-color: #aaa !important; }

nav#bar a.grey:hover {
  color: #aaa;
  text-shadow: 0px 0px 5px #aaa; }

nav#bar a.nav-link.selected {
  line-height: 42px;
  border-top: 3px solid #0b0d0d;
  background-color: #0b0d0d;
  height: 45px;
}

Branding - Custom brand header with logo, navigation and icons
How to embed my forum like this? Or maybe customize?
How to Add Custom Menu to Header Nav like Sitepoint
How do I incorporate discourse with my c# .net mvc web app?
Why isn't there an obvious link from meta.discourse.org to discourse.org in the header?
Hosted plans, fonts, CDN, and CORS headers
How I can create a link to the web app at the top of discourse?
Optional Link to Main Site?
Global navigation or links
Banner in the top of the lists with sign up form
How can we Customizing Header?
(axil) #2

Added screenshots to first post :wink:


(Jason Potter) #3

This is probably slightly off topic… but i wasn’t sure if this question needed to be a new post… (this is my first post)

Is it possible to control who sees the custom header? only show “non-logged-in” users?

Electric Skateboard Builders Forum

Below is the code i have in my custom HTML header

QUESTION 1: what code needs to be added to show this only to people who are not signed up / logged in?
QUESTION 2: what code needs to be added to show this only to “level 1 user only”

Thanks

<div id="top-navbar" class="container">
  <span id="top-navbar-links" style="height:20px;"></span>
</div>

<div id="top-navbar" style="max-width:1100px;margin-right:auto;margin-left:auto;">
  <span id="top-navbar-links" style="height:20px">
    <a href="http://www.enertionboards.com/electric-skateboard-parts/vesc-190kv-electric-skateboard-motor-bundle-sale/?utm_source=esk8-forum&utm_medium=forum-banner&utm_campaign=forum-advertising" class="dl-menu">Limited Offer: VESC & R-SPEC Bundle Now $199USD</a>
  </span>
</div>

(Jason Potter) #4

is it better to write my question in a new topic?


(axil) #5

I’m not sure if this is possible.


Add horizontal menu to after header
(Rafael dos Santos Silva) #6
<div id="top-navbar" style="max-width:1100px;margin-right:auto;margin-left:auto; display: none;">
<span id="top-navbar-links" style="height:20px">
  <a href="http://www.enertionboards.com/electric-skateboard-parts/vesc-190kv-electric-skateboard-motor-bundle-sale/?utm_source=esk8-forum&utm_medium=forum-banner&utm_campaign=forum-advertising" class="dl-menu">Limited Offer: VESC & R-SPEC Bundle Now $199USD</a>
</span>
</div>
html.anon #top-navbar {
  display: block;
}

(Jason Potter) #7

thanks @Falco so put that code at top or bottom of my existing code?

html.anon #top-navbar {
  display: block;
}
<div id="top-navbar" class="container">
<span id="top-navbar-links" style="height:20px;">
</span>
</div>

<div id="top-navbar" style="max-width:1100px;margin-right:auto;margin-left:auto;">
<span id="top-navbar-links" style="height:20px">
  <a href="http://www.enertionboards.com/electric-skateboard-parts/vesc-190kv-electric-skateboard-motor-bundle-sale/?utm_source=esk8-forum&utm_medium=forum-banner&utm_campaign=forum-advertising" class="dl-menu">Limited Offer: VESC & R-SPEC Bundle Now $199USD</a>
</span>
</div>

(Jason Potter) #8

i just tried that as above, it doesn’t work…

am i missing somthing?


(Jason Potter) #9

or do i need to put this in the CSS area? - sorry i have no idea about html/coding etc.

html.anon #top-navbar {
  display: block;
}

(Rafael dos Santos Silva) #10

Yeah, CSS goes in the CSS area.


(Jason Potter) #11

either your instructions are not clear enough or i am an idiot, maybe both…

but i can’t get it to work…

this is what my CSS area looks like

/*Individual links*/
html.anon #top-navbar {
  display: block;
}
a.dl-menu {
    font-size: 14px;
    color:#cc0000;
}

(Jason Potter) #12

this is what my header looked like

<div id="top-navbar" class="container">
<span id="top-navbar-links" style="height:20px;">
</span>
</div>    
<div id="top-navbar" style="max-width:1100px;margin-right:auto;margin-left:auto; display: none;">
    <span id="top-navbar-links" style="height:20px">
      <a href="http://www.enertionboards.com/electric-skateboard-parts/vesc-190kv-electric-skateboard-motor-bundle-sale/?utm_source=esk8-forum&utm_medium=forum-banner&utm_campaign=forum-advertising" class="dl-menu">Limited Offer: VESC & R-SPEC Bundle Now $199USD</a>
    </span>
    </div>

(Jason Potter) #13

with this in place the link at top of page disappears, which seems correct, then i log out of forum, but the link is not shown to me, I assumed maybe the browser cookie was thinking that i was a logged user, so i used incognito mode in chrome.

same result… the link did not show…

anyone see a problem here?


(Mittineague) #14

id values should be unique.

Your example HTML shows 2 div#top-navbar

This error can cause unexpected browser behavior because the browser will not know what to do. Some might do what you want, others won’t.

You should fix the invalid HTML.


Show header text to non-logged in users
(Jason Potter) #15

if i had the knowledge to fix it i would…

is there someone i can pay to set this up correctly?


(Jeff Atwood) #16

You an post your budget and what you need in #marketplace.


(Jason Potter) #17

done, thanks for the direction


(Jason Potter) #18

I have created a work request for this, check it out:


(Blu McCormick) #19

I used the code for my menu and it worked beautifully. Thanks so much. I am wondering how hard it would be to switch out the vertical placement of the logo and menu so the logo is in the top-left of the screen and the menu sits right at the bottom of the header?

Maybe if I know how to think of the code, I can figure it out. For example, I could find code reposition the logo and independently add code to lower the position of the menu.


(Joshua Rosenfeld) #20

Try moving the HTML from Header to After Header.