x

How Do I Change Hamburger Menu Icon To Custom Icon In Mobile View

Good Afternoon,

I'm using the template "Unite 2" and I need to modify the "hamburger" nav icon in the mobile template.  I want to make an icon that says "Menu" with a down arrow next to it, so it's more intuitive than the hamburger menu icon.

I can make the new icon, but can someone tell me how/where to replace that Icon?

Thanks in advance!

2,955 Views
Message 1 of 13
Report
12 REPLIES 12

@redpineeq:  Hamburger icon is now a standard web vocabulary.  Since you are asking "where and How" I would guess that you are not that good with CS and other stuff.  If you did it just a bit wrong you could break the mobile responsiveness of the theme.

2,952 Views
Message 14 of 13
Report

I'm not sure what you mean when you say "Hamburger icon is now a standard web vocabulary". I'm just trying to replace the hamburger icon in the mobile view.  Not sure what "CS" is.  If you mean CSS, then you are correct, I'm not that familiar with it.  I'm not sure what "other stuff" I'm not good at.  I could on the other hand upload a different icon if I knew where it pulled the hamburger icon from.

If I upload a navigation icon/image to replace the hamburger, it shouldn't break anything as long as it's the same dimensions as the one it's replacing, correct?

Any help would be appreciated.

Thanks!

2,871 Views
Message 14 of 13
Report
Square

Which of your sites are you trying to change this on, @redpineeq?

2,861 Views
Message 14 of 13
Report

2,811 Views
Message 14 of 13
Report
Square

Thanks. If your image is roughly the same size it shouldn't affect anything. Can you upload your new icon to a hidden page of your site and let me know the URL?

2,809 Views
Message 14 of 13
Report

Where would I upload the image?  I'm assuming the same location as the current "Hamburger" icon, but I don't know where to find it to replace it.

Thanks!

2,800 Views
Message 14 of 13
Report
Square

You can upload it in the Theme editor - anything uploaded into the Assets folder there is mapped like this on the live site:

mysite.com/files/theme/filename.extension

It will probably also require updating some CSS so that it the element uses the new image. Are you familiar with CSS?

2,798 Views
Message 14 of 13
Report

Hi Adam, 

How do i change 'menu' to 3-line hamburger menu icon. 

Thanks

2,785 Views
Message 14 of 13
Report
Square

I just replied to your other post about this, @megsyth - I think it might be easier to just switch to a different theme that uses the hamburger icon all the time instead. You should see a few as you look through the list of themes.

2,783 Views
Message 14 of 13
Report

Hi, I have the same query. For the mobile version , I want to change the hamberger lines to a text "Menu". How and which section do I edit in the CSS FILE ?

my website is https://chumpythoughts.weebly.com/

1,996 Views
Message 14 of 13
Report

OK thanks, I can upload the image.  But I do not know CSS.  Is there anyone there who can help with the CSS?

2,006 Views
Message 14 of 13
Report
Square

There are some people here who are familiar with it. They'll probably need to know the path to the image and also see your live site in order to offer assistance.

2,002 Views
Message 14 of 13
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.