How to change expander icon in top nav menu

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
aevansb
Propeller Head
Posts: 10
Joined: Tue Mar 11, 2014 12:50 pm

How to change expander icon in top nav menu

Post by aevansb »

I'd like to change the expander icon (not sure the official term) in the top nav menu, but I can't figure out where to do it. Does anyone know?
expander_icon.png
You do not have the required permissions to view the files attached to this post.
Adam Evans in Chicago
Sr Technical Documentation Manager at Strata Decision Technology
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Post by DaveMags »

I don't see where you can set this in the skin file, but you can do it with CSS. Add this to your main CSS file:

Code: Select all

ul.navigation ul > li.has-children > a::after 
{
    content: somethinghere;
}
Then, you're going to replace somethinghere with whatever you want to appear in that spot. You have a couple of options at this point. I assume you probably want another icon, so If you have an image you want to use, you can reference it like this:

Code: Select all

content: url('../Images/somefolder/anotherolder/imagefiename.png');
You can also use an icon code (I do this in my top nav site on these menus). Check out https://brajeshwar.github.io/entities/ for a good list of options for that icon. On that site, you'll want to use the code in the CSS (ISO) column. In that case, you'll place that icon code in quotes in that content style, like this for example:

Code: Select all

content: "\25b6";
You can also then add font-size, color, etc. styles to that same element to style the icon. \25b6 in my example is a solid right-pointing triangle, and comes out looking like this:
menuicon.png
Hope this helps :)
You do not have the required permissions to view the files attached to this post.
aevansb
Propeller Head
Posts: 10
Joined: Tue Mar 11, 2014 12:50 pm

Re: How to change expander icon in top nav menu

Post by aevansb »

Thanks so much! It worked! Very helpful.
Adam Evans in Chicago
Sr Technical Documentation Manager at Strata Decision Technology
vkitcen
Jr. Propeller Head
Posts: 3
Joined: Thu Oct 04, 2018 6:06 am

Re: How to change expander icon in top nav menu

Post by vkitcen »

Hi Dave,
I've been trying to implement your solution in the top nav Silverado template. I've added your CSS code to the MainStyles.css (used "\25b6") but I don't see anything different in my top nav. I assumed your solution would work for any template. Is this correct? If yes, what am I missing here. Thanks.
Also, how would you change the CSS code if the same functionality needs for the side navigation menu (same template)?
Thank you. Vlad.
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Post by DaveMags »

I downloaded the Silverado template to test it out, and you are right.

Try adding that same code, shown again below, to both your "StylesForHomePage.css" and the "MainStyles.css" file. When I put it in the MainStyles.css file, it only changed the icon on topic pages, but not the home page. I'm thinking that maybe that's what happened on yours? Adding it to the StylesForHomePage.css file also added it to the home page.

Does that fix it?

Code: Select all

ul.navigation ul > li.has-children > a::after
{
     content: "\25b6";
}
For the side nav version, you want to change this icon?
side nav icon.png
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Post by DaveMags »

Well, assuming that's what you want to change, I think I managed to do that - kind of a fun challenge anyway :). Flare creates that "icon" in an interesting way, with a border that it hides a part of to make a triangle, which it then flips upside down when you expand the menu.

My method was to clear all that out, then insert my own icons in the right places. Same as before, I think you'll need to put this in both your home page and main styles css files to get it to show on all your pages.

Code: Select all

.is-accordion-submenu-parent > a span.submenu-toggle     /* Removes the default arrow/triangle */
{
	border: none;
}

.is-accordion-submenu-parent > a span.submenu-toggle::after     /* Adds an icon for when the menu is collapsed - I used our right-pointing triange and made it white */
{
    content: "\25b6";
    color: #fff;
}

[aria-expanded='true'].is-accordion-submenu-parent > a span.submenu-toggle::after     /* Adds an icon for when the menu is expanded - I used a heart and made it orange ¯\_(ツ)_/¯  */
{
    content: "\2665";
    color: orange;
}

.is-accordion-submenu-parent > a span.submenu-toggle-container     /* Adjusts the positioning to center it - adjust to your needs */
{
	height: 60%;
}

[aria-expanded='true'].is-accordion-submenu-parent > a span.submenu-toggle     /* Stops the icon from flipping upside down when you expand the menu */
{
    -webkit-transform-origin: none;
	-ms-transform-origin: none;
	transform-origin: none;
    -webkit-transform: none;
	-ms-transform: none;
	transform: none;
}
side nav icon change.png
You do not have the required permissions to view the files attached to this post.
vkitcen
Jr. Propeller Head
Posts: 3
Joined: Thu Oct 04, 2018 6:06 am

Re: How to change expander icon in top nav menu

Post by vkitcen »

Thanks for your response, Dave. I am wondering if we talk about the same Silverado template? Your screen shot indicates that your template already has the expander icons. The Silverado template that I download does not. My screen shot is below. Actually, none of the available Top Nav templates have the expander icons in their menu (top or side). Thanks.
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Post by DaveMags »

hmmm - I was looking at the Silverado template here: https://www.madcapsoftware.com/download ... templates/
vkitcen
Jr. Propeller Head
Posts: 3
Joined: Thu Oct 04, 2018 6:06 am

Re: How to change expander icon in top nav menu

Post by vkitcen »

I think I can add a bit more to my previous post:
I looks like the Top Nav templates (the Silverado template as well) are using the Menu Proxy for navigation which is connected to the SideMenu skin. This is what my screen shot (in my previous post) is showing. Now, is there a way to make this type of side navigation look/behave as the side navigation in the Side Nav templates?
I hope this makes sense. Thank you, Dave.
kerimucci
Propeller Head
Posts: 59
Joined: Thu Nov 02, 2017 3:38 am

Re: How to change expander icon in top nav menu

Post by kerimucci »

Hi guys.
I've added the above code to my CSS to change my top nav icon. It worked, but I am now having issues getting the correct padding on the left side of the icon. I have tried setting this for the same style, but the menu option name and icon are still smushed. Is there somewhere else I should be setting this?
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Post by DaveMags »

Hi Keri,

Try applying right padding to the list items themselves. I think you can do this directly in the main skin file in the Top Navigation Menu Item section. Depending on your table of contents and how many levels you go, you might need to play with settings for 1st level, 2nd level, etc. to get what you need in each. If it works from the skin, probably best to go ahead and set it there.

If that doesn't work, you can try adding this to the CSS (just change 20px to whatever value works for you):

Code: Select all

ul.navigation ul > li
{
     padding-right: 20px;
}
Also, I imagine some of your text will wrap after you add the padding. If you don't want that, you could also make the menu itself a little wider. In my Top Nav site I have those hover menus set to be a little wider since Flare has them pretty narrow otherwise. There is no width setting in the skin, so you have to set that in the CSS directly. Again, just replace 200px with whatever size would work for you.

Code: Select all

ul.navigation ul
{
     width: 200px;
}
I hope this helps.
kerimucci
Propeller Head
Posts: 59
Joined: Thu Nov 02, 2017 3:38 am

Re: How to change expander icon in top nav menu

Post by kerimucci »

Thanks so much, DaveMags. Adjusting the padding within the skin worked fine. :)
lc4466
Propeller Head
Posts: 26
Joined: Tue Jun 18, 2019 10:20 am

Re: How to change expander icon in top nav menu

Post by lc4466 »

DaveMags wrote:Well, assuming that's what you want to change, I think I managed to do that - kind of a fun challenge anyway :). Flare creates that "icon" in an interesting way, with a border that it hides a part of to make a triangle, which it then flips upside down when you expand the menu.

My method was to clear all that out, then insert my own icons in the right places. Same as before, I think you'll need to put this in both your home page and main styles css files to get it to show on all your pages.
Is there anything different about this solution for the generic HTML5 side navigation skin, or when replacing the existing shape with an image instead? I tried to use your code with the same images I used for my dropdown expanders and it worked to remove the existing shape, but the placement of the new images was way off - not even in the same line as the text.
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Post by DaveMags »

I created a new project with the default Sidenav HTML5 skin to test it out, and I did have change some things. Not sure if my original was messed up, but I had some of these selectors out of order (the ones with the "aria=" code in it) and was able to get ride of one of the styles altogether. Ignore my old one and give this a try:

Code: Select all

.is-accordion-submenu-parent > a span.submenu-toggle /* Same as before. Removes the border that creates the default triangle shape */
{
    border: none;
}

.is-accordion-submenu-parent > a span.submenu-toggle::after     /* Adds a default icon (for when the menu is collapsed). I used a white Spade this time. */
{
    content: "\2664";  /* The icon code */
    color: #fff;  /* The color of the icon */
    font-size: 1.5em;  /*  The size of the icon */
    position: absolute; /* Do not change */ 
    left: -11px;  /* The left/right positioning of the icon */
    bottom: -16px;  /* The top/bottom positioning of the icon */
}

.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle     /* Stops the icon from flipping upside down when you expand the menu */
{
    -webkit-transform-origin: none;
   -ms-transform-origin: none;
   transform-origin: none;
    -webkit-transform: none;
   -ms-transform: none;
   transform: none;
}

.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle::after     /* Changes the icon for when the menu is expanded - I used a heart and made it orange. */
{
    content: "\2665";
    color: orange;
}
Something else that is useful is to add the code below while you're position the icon. It puts a border around the clickable area, to help make sure you put the icon in the place users click. Once you have it set as you want it, remove this code to get rid of the border.

Code: Select all

.is-accordion-submenu-parent > a span.submenu-toggle-container 
{
   border: 1px solid gray;
}
Here's what it all looks like for me (including the temporary border).
sidenav icon swap.png
Let me know if that works. :)
You do not have the required permissions to view the files attached to this post.
lc4466
Propeller Head
Posts: 26
Joined: Tue Jun 18, 2019 10:20 am

Re: How to change expander icon in top nav menu

Post by lc4466 »

That worked like a dream, thank you so much! It's such a small thing but it's been driving my web designer crazy to not be able to change, ha. Thanks again!

ETA: Ah, minor hiccup. In mobile, the icon is positioned correctly when closed but jumps to the top of the line when expanded. Not sure what's causing that.

ETA2: Changed to the 'drilldown' style silde out menu to avoid the above issue for now and seems to be working fine. That style has simple icons for the drilldown, so those are easy to replace using the following code (in case it helps anyone else!):

Code: Select all

.is-drilldown-submenu-parent > a::after 
{
    content: '\BB';    /* Replace this with the icon or image you want */
    display: inline;
    margin-left: 0.5rem; 
}
Post Reply