TopNav skin menu customisation

[MC Hammer]

Hi everyone,
I am relatively new to HMTL5 output (and WebHelp) and have been working on projects using HTML5 skins (not tripane).
I would like to change the >> to something else and was wondering if this is possible (and where?).

I had a look at the HTML skin editor without success.

Thank you in advance for any help.

[kwag_myers]

Try adding this to your CSS and change the content value as desired:

Code: Select all

.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after, .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
  content: "\BB";
  margin-left: 0.5rem;
  display: inline; }

If you want to use an image, replace "\BB" (including quotes) with url(../Images/image.jpg).

The chevron comes from the foundation.5.5.0.css file in the Output folder (...\Output\HTML5\Skins\Fluid\Stylesheets). Usually, your main CSS overrides it, but you may need to add the !important rule:

content: url(../Images/image.jpg) !important;

[NorthEast]

Those styles (.???-off-canvas-menu) are not for the top nav menu in the screenshot, they're for the off-screen menu that appears when you're in Tablet/Phone mode.

You can find out the styles used by pressing F12 and using the browser tools 'inspect' feature, to see the HTML and CSS in use.

[kwag_myers]

Actually, when the browser in Restore mode, too. With the browser maximized it's:

Code: Select all

ul.navigation ul > li.has-children > a::after {
    position: absolute;
    border: medium none;
    content: "";
    right: 5px;
    top: 9px;
}

But thanks for pointing that out, Dave. I see that I need to add my first style to remove the chevrons from Restore mode.