Replacing default hamburger menu icon

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Perrorist
Propeller Head
Posts: 93
Joined: Fri Dec 02, 2016 4:04 pm
Location: Central Coast, NSW

Replacing default hamburger menu icon

Post by Perrorist »

This is in reference to the side navigation skin, but was also relevant to top nav. I solved this problem once for top nav, but I've forgotten how I did it.

The default hamburger menu icon is white bars on a transparent background, suitable for a dark heading. However, I have a light grey heading and the white icon is barely noticeable.

I've searched for menu.png and found it only in a generated skin stylesheet for mobile and tablet. The source doesn't appear to be in the content folder. So, my question is: Where do I find menu.png so that I can replace it with one I have with black bars?
AlexFox
Sr. Propeller Head
Posts: 149
Joined: Thu Oct 19, 2017 1:56 am

Re: Replacing default hamburger menu icon

Post by AlexFox »

It's embedded in the skin, you'll need to add your own image in the skin editor.
Perrorist
Propeller Head
Posts: 93
Joined: Fri Dec 02, 2016 4:04 pm
Location: Central Coast, NSW

Re: Replacing default hamburger menu icon

Post by Perrorist »

I tried that, but I couldn't delete the existing menu.png. Do you know how I can do that?
AlexFox
Sr. Propeller Head
Posts: 149
Joined: Thu Oct 19, 2017 1:56 am

Re: Replacing default hamburger menu icon

Post by AlexFox »

You don't need to delete anything to override the image, just select your replacement image from your file. Edit: Read Dave's solution below :)
Last edited by AlexFox on Fri May 11, 2018 12:18 am, edited 1 time in total.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Replacing default hamburger menu icon

Post by NorthEast »

1. On the skin Styles tab, find the item Navigation Slide Out Button.
2. For the Image property, click the select image icon, then click ... (browse) to select your image. That'll add it to the skin.

I'd strongly advise not to edit files in the program files folder.
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Replacing default hamburger menu icon

Post by doc_guy »

Ditto what Dave said. Don't modify this in the program files folder. The best solution is to just replace it in the skin, following Dave's instructions. It does not need to have the same name. When you select the replacement icon, Flare will update all references to the file name and will use the new image you selected.
Paul Pehrson
My Blog

Image
Perrorist
Propeller Head
Posts: 93
Joined: Fri Dec 02, 2016 4:04 pm
Location: Central Coast, NSW

Re: Replacing default hamburger menu icon

Post by Perrorist »

Many thanks for your help, everyone.
headphone_jack
Propeller Head
Posts: 16
Joined: Fri Dec 22, 2017 1:49 am

Re: Replacing default hamburger menu icon

Post by headphone_jack »

Dave Lee wrote:1. On the skin Styles tab, find the item Navigation Slide Out Button.
2. For the Image property, click the select image icon, then click ... (browse) to select your image. That'll add it to the skin.
Which Styles tab are you referring to? The only Styles tab I can find is under Project Organizer > HTML 5 - Top Navigation > Styles. But I can't find a Navigation Slide Out Button option in there...
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Replacing default hamburger menu icon

Post by doc_guy »

You only see it if you are in the Tablet medium or the Mobile medium.

Image

Welcome to the forums!!
Paul Pehrson
My Blog

Image
headphone_jack
Propeller Head
Posts: 16
Joined: Fri Dec 22, 2017 1:49 am

Re: Replacing default hamburger menu icon

Post by headphone_jack »

doc_guy wrote:You only see it if you are in the Tablet medium or the Mobile medium.
Aaaah, that's where I was going wrong! Thanks for your help!
Post Reply