Hi,
I've been trying to find a way to add a border to the bottom of the header in my HTML 5 Top Nav project and having no luck. There isn't an option in the skin (I'm using the blue one you can download off Madcap's site) and I've tried opening it in the text editor and adding it, but it has no effect on it. The reason I'm trying to do is that the header may have to be white to match our company site and it just needs broken up. I'm open to something in the page layout provided it would move when you scroll down. Any ideas?
Thanks,
Liv
Border on an HTML 5 Top Nav Header
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: Border on an HTML 5 Top Nav Header
Hi Liv! You can use the stylesheet to add a border to the bottom of the header. Here's my code:
If you're using 2017 R2, the exact style name might have changed. But you should be able to figure it out with the dev tools in your browser.
Code: Select all
nav.tab-bar
{
border-bottom: solid 5px #A9A9A9;
}
Casey
Re: Border on an HTML 5 Top Nav Header
Thanks, Casey. I was focused on the skin I forgot about my stylesheet.
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Border on an HTML 5 Top Nav Header
This is one of the benefits of TopNav: since there is no iFrame, you can make changes directly to your stylesheet, and they will be applied to any place you need in the TopNav output. It's really quite helpful.
Re: Border on an HTML 5 Top Nav Header
I can't find nav.tab-bar in any file. Inspecting the output reveals nav.title-bar, but I can't see how I can access that either.
I'm using 2017 R2 with the sticky header option.
I'm using 2017 R2 with the sticky header option.
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: Border on an HTML 5 Top Nav Header
nav.tab-bar is a selector that MadCap adds automatically when generating the output. But you can override the defaults by adding the selector (and the attributes you want to change) to your stylesheet. I used the Text Editor, but you can probably add it through the Stylesheet Editor as well.Perrorist wrote:I can't find nav.tab-bar in any file. Inspecting the output reveals nav.title-bar, but I can't see how I can access that either.
I'm using 2017 R2 with the sticky header option.
Casey
Re: Border on an HTML 5 Top Nav Header
Thanks for that tip, Casey!