Accepted Solutions
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
- Under Header in the Customize Panel, select the Use custom HTML/CSS option. This will inject some default code.
- 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
- 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.)
<style>
li.bold-nav-item a {font-size: 44px; color: #fff;}
li.bold-nav-item a:hover {background-color: #fff !important; color: #c20071;}
</style>
<ul class="nav nav-pills bold-nav" style="margin-top: 60px;">
<li class="center-text bold-nav-item" style="margin-right: 30px;">
<a href="#">Discover</a>
</li>
<li class="center-text bold-nav-item" style="margin-right: 30px;">
<a href="#">Engage</a>
</li>
<li class="center-text bold-nav-item">
<a href="#">Volunteer</a>
</li>
</ul>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.
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
- Under Header in the Customize Panel, select the Use custom HTML/CSS option. This will inject some default code.
- 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
- 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.)
<style>
li.bold-nav-item a {font-size: 44px; color: #fff;}
li.bold-nav-item a:hover {background-color: #fff !important; color: #c20071;}
</style>
<ul class="nav nav-pills bold-nav" style="margin-top: 60px;">
<li class="center-text bold-nav-item" style="margin-right: 30px;">
<a href="#">Discover</a>
</li>
<li class="center-text bold-nav-item" style="margin-right: 30px;">
<a href="#">Engage</a>
</li>
<li class="center-text bold-nav-item">
<a href="#">Volunteer</a>
</li>
</ul>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.
