Border on an HTML 5 Top Nav Header

[Liv_W]

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

[cdschroeder]

Hi Liv! You can use the stylesheet to add a border to the bottom of the header. Here's my code:

Code: Select all

nav.tab-bar
{
    border-bottom: solid 5px #A9A9A9;
}

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.

[Liv_W]

Thanks, Casey. I was focused on the skin I forgot about my stylesheet.

[doc_guy]

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.

[Perrorist]

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.

[cdschroeder]

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.

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]

Thanks for that tip, Casey!