Add menu items to main header area


(columbusgeek) #1

HI all

I have seen the various topics on how to insert menu links above the header, (the guide included in the new setup), and I have seen the forum post on how to insert menu items below the top bar, however I do not see any way to currently insert menu items inside the header to the right of the logo. (as seen in included screenshot)
Is this possible with some careful hacking?

I know these menu items will not be visible when scrolling and that is fine. I’d like them to show for the initial header however. My main site looks shockingly similar to the existing top bar for Discourse and just adding some simple menu items would make the entire experience seamless.

Thanks in advance. Astonishingly fantastic forum BTW. I’m an old school VB user and this is leaps and bounds better.

(i’m a new user so I cannot upload images or link to images. Hopefully this link will work)


(Jeff Atwood) #2

You mean the hamburger menu? That hamburger menu hook might only be for plugins, though.


(columbusgeek) #3

Nope, not hamburger. Just the space immediately to the right of the logo.


(Jeff Atwood) #4

Oh aha! I can help you with that.

Here’s what I added to Admin, Customize, CSS/HTML to get a dynamic “disappears when you scroll down” header like this on http://talk.commonmark.org:

CSS

#navmenuv {
  position: absolute;
  z-index: 9999;
  height: 50px;
  margin-left: 70px;
}

#navmenuv li a {
  font-size: 16px;
  font-weight: bold;
  color: #999;
  line-height: 60px;
  padding: 0 15px;
}

#navmenuv li a:hover {
  color: black;
}

#navmenuv ul.nav {
    padding: 0;
    margin: 0;
}

#navmenuv .nav li {
    display:inline;
    padding:0;
    margin:0;
}

Header

<div id="navmenucontainer" class="container">
<div id="navmenuv">
    <ul class="nav">
      <li><a href="http://commonmark.org/">What is CommonMark?</a></li>
      <li><a href="http://spec.commonmark.org/">Spec</a></li>
      <li><a href="http://code.commonmark.org/">Code</a></li>
      <li><a href="http://try.commonmark.org/">Try It!</a></li>
    </ul>
</div>
</div>

Add banner to site header
Banner ad within header
(columbusgeek) #5

bong!!!Perfect. Thanks Jeff. :).

I’ll give it a shot as soon as I can. Thanks mang. :slight_smile:


(Zack) #6

Can not wait to try this - thank you for this.


(columbusgeek) #7

Your code was a base and I was able to tweak it to mimic how my main site nav looks. thanks again Jeff. :slight_smile:


(Kane York) #8

Nope, not at all, HEAD html can take advantage of it. You just add a template with a mandated name followed by a unique name, so there’s no “only-one” conflicts with plugins. @DeanMarkTaylor had an example, I believe?

To be clear, we’re talking about adding entries in the “three-lines” menu, which we’ve established is not necessary here.


(Christian Simplicity) #9

Is there any way to “attach” them to the main header area and align them to the right near the notifications bubble so the added menu items don’t scroll up?


(Henning) #10

I’ve just added a item this on http://discourse.rmsg.dk.

But when the pase scrolls down, the new item slides out of the screen while the logo stays.

How do I make it stay on the page, along with the logo, search, hambuger and user-buttons?

Tthanx


(Marco) #11

Look this topic:


(Pat David) #12

Is this still the best option for adding these types of links to the header?

It seems to still work, but an option for it to not appear when on a mobile/responsive render might be nice (it still shows up on mobile and is not pretty).