Adding links to pages on top menu

SaraJK

I would like to create a couple of pages for my open data site and then have links to them at the top of the site to the right of the default "Home" link. My home link is currently on the left side of the main menu area (I don't have the logo enabled). Looking around, I see code snippets and examples for customizing but I don't know where to go to start. Is there a step by step tutorial for where the code goes in the site editor and how to change it to add these links? 

KlaraSchmitt

Hi Sara,

Are you talking about a custom header or using the standard header? Currently, you cannot add links to the standard header. You only get site name and logo. However, we have changes to our navigation styling coming in the next month or so that will give you more customization and the ability to add links to a header. For the time being though, there are two methods forward that you could use.

Make a Custom Header

1. Under Header in the Customize Panel, select the Use custom HTML/CSS option. This will inject some default code.
2. There is a small gear icon on the page in the upper right-hand corner. It may be hard to see. (This is a bug as it lost some of its button styling.) Click on that to edit the box that controls the HTML. If you don't like the HTML we provided, you can also use https://getbootstrap.com/docs/3.3/getting-started/#examples 
3. The CSS that controls that HTML can be found in the Customize Panel and the parent class of the custom header is a class called .custom-header. If you nuke the CSS/HTML we provide and use default Bootstrap 3, you'll want to make sure to prefix any styling with the .custom-header class.

Create a Navigation with a Text Card

The alternative is that you could the standard text card with HTML and embed CSS through <style> tags.

In the example site I show above, I actually use the default header, which means that only my home page will show this automatically. Dataset views and the search results view would get just the default header. But as pages can also use text cards, I could duplicate this same look onto them, it just wouldn't automatically carry over.

But the way that I achieve this look is that I have my first row set to the dark pink color. I have two cards in that row, an image card and then a text card. The text card contains the following HTML. You could then replace the href="#" in the links with the actual links for your pages. The navigation bar below the pink row, is a black row containing another text card with a bunch of navigation links. (I didn't include that HTML in the snippet below.)

<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="selector token">li.bold-nav-item a</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 44px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">li.bold-nav-item a:hover</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #fff <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #c20071<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ul</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>nav nav-pills bold-nav<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>li</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>center-text bold-nav-item<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">margin-right</SPAN><SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Discover<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>li</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>li</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>center-text bold-nav-item<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">margin-right</SPAN><SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Engage<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>li</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>li</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>center-text bold-nav-item<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>#<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Volunteer<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>li</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>ul</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

There is not step-by-step documentation for doing custom HTML, but the Bootstrap 3 documentation page is a good start if you are trying to learn.