Top Nav menu symbols

[RickD]

Hello,

I'm using Flare 12 to create an HTML 5 top navigation output, and have received feedback that users do not realise that the headings along the top are actually a drop down menu. The obvious fix is to add drop down symbols next to the menu items to indicate that they drop dwon / are menus. I want to add a png icon or font awesome symbol next to each menu heading but these heading are taken directly from the TOC, which does not appear to support adding icons or font awesome symbols. And the top navigation skin does not have anywhere to enter them either

Does anyone know how I could add drop down symbols next to the top navigation menu headings?

many thanks

[NorthEast]

Yep, you can do that using a little CSS:

Code: Select all

ul.navigation > li > a:before
{
   content: "Hi! ";
}

This selects the first level hyperlink in the menu and uses the :before pseudo class to add content before it (you could use :after in the same way).

Then set the content to whatever you want, such as:
* A Font Awesome character, e.g code for caret-down: content: "\f0d7";
* An image, e.g.: content: url("..\images\menu.png");

[jsandora]

Yep, you can do that using a little CSS:

This selects the first level hyperlink in the menu and uses the :before pseudo class to add content before it (you could use :after in the same way).

NICE. Thanks David (and RickD), been looking to do this myself (adding icons before AND after the menu items to match how our solutions look).

Follow up question: is there a way to make those icons conditional (so they don't also appear in printed documentation)?

[NorthEast]

Follow up question: is there a way to make those icons conditional (so they don't also appear in printed documentation)?

This example is for the top nav menu, so that's not in any print targets anyway.

Generally though, if you want a style in one target/output and not another, then set up the style in a medium (@media) which is used for that target.

[RickD]

I thought i replied earlier, just wanted to say thanks - this solution worked perfectly!

[peaveygtr]

Just to add on - I know this is about the top nav, but I've also received the same feedback about the side menu sepecifically. Any unique advice for implementing open/close fonts for the side menu vs the top nav?

[NorthEast]

If you press F12, you can use your browser's developer tools to inspect the code for the side menu.

aside.right-off-canvas-menu li a:before

[jsandora]

Yep, you can do that using a little CSS:

Code: Select all

ul.navigation > li > a:before
{
   content: "Hi! ";
}

This selects the first level hyperlink in the menu and uses the :before pseudo class to add content before it (you could use :after in the same way).

Then set the content to whatever you want, such as:
* A Font Awesome character, e.g code for caret-down: content: "\f0d7";
* An image, e.g.: content: url("..\images\menu.png");

Does this method give each menu item the same symbol?

Is there a way to set it up so each menu item uses a different symbol/image? Something like this:

[NorthEast]

Is there a way to set it up so each menu item uses a different symbol/image? Something like this:

Maybe base it on the filename of the topic; e.g. say your main Employees topic is "menu_employees.htm", then you could reference that like this:

Code: Select all

ul.navigation > li > a[href*="menu_employees.htm"]::before { content: "Employees!"; }