Change mobile hamburger menu

Posted in: Newsmag
Post count: 5

Hello,

We’re running Newsmag 4.0 (child theme) and I would like to change the mobile menu from the 3×3 squares to the 3 bars.

Can someone please let me know how I can do this?

Thanks!

Post count: 23312

Hello jdodd4s,

You could use sprites and use custom CSS to add a background instead of an icon. Something similar like we use for social counter – http://screencast.com/t/7Hg5sNe9Jhttp://screencast.com/t/2yCMl4zs8wGN
Or you can add new icons to the theme fonts – http://screencast.com/t/059z1oelgSb

*go to https://icomoon.io/app
*button “import icons”, import from newspaper.svg (in /images/icons/);
*Select your icons and copy – http://screencast.com/t/62BMZmEhhttp://screencast.com/t/hxTzPkSy
*button “generate font”, button “download”;
*copy the 4 files (.eot, .svg .ttf .woff), in “icons” folder in the downloaded zip file, rename icomoon.* to newspaper.*, replace old files.

I suggest to use a plugin if you don’t have basic experience or to get someone to help you with this.

Hope this helps and let us know how it goes!

Thanks for your understanding!

Post count: 5

Can you recommend a plugin please? I didn’t set up our WordPress site so I don’t have access to the server, only a WP login.

Thanks!

Post count: 5

Also, do we need to have the mobile theme plugin installed? Is that available with this version?

Thanks!

Post count: 5

Sorry, I do have FTP access and the icon I want to use is included in the set.

I’m just not sure where to change/specify that one specific icon.

mobile menu icons

Post count: 23312

Hello jdodd4s,

You could place the hamburger icon in the menu as a menu item, using Font awesome and the guide from above ->
http://fontawesome.io/icon/bars/

More information here ->
https://forum.tagdiv.com/how-to-add-icons-in-menu/

Thanks for your understanding!

Post count: 5

I don’t want to change any part of the look of the desktop menu, mobile only.

This is what our site looks like on a phone. I need to do change the top icon…

http://www.ambiance.com/wp-content/uploads/2018/10/mobilemenu2.jpg

Post count: 23312

Hello jdodd4s,

You should load this plugin and then, targeting a class from the mobile, where this symbol is added you should replace it with a symbol you like from this plugin. You should use the Inspector Browser for more investigation at your website. Check here -> https://www.screencast.com/t/7varxB4PFM

Thanks for understanding!

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newsmag’ is closed to new topics and replies.