The site that I'm currently upgrading to a new responsive template has a slight issue in that the hamburger menu only ever shows 2 bars. (There's no meat between the bun ). The menu works fine on all screen resolutions but it does look wrong. I've been unable to locate where the three bars are generated from but it's not an image file.

Anyone any ideas how to make it show all three bars? As a test I have setup a test site from the unzipped template and that's exactly the same so I'm sure it's not of my doing. The template is the php Natura.



Steve
Bolton Lancashire England

Hi Steve, have you looked through the css file(s) that come with the menu. Most of these come with an extensive css file, or multiple css files.
Being that the meatless hamburger only shows on the smaller views, make sure you are digging into the css files where the media queries are shown.
If it has javascript and not pure css, it could be coming from there.
Perhaps is just the = sign stuck in there with pseudo css...

If you want to message me a link to the site, I'll take a look.

Thanks,
David

Hi Dave

At the moment the new site redesign is in a separate folder which is IP restricted for viewing.

I have found four files which I'm thinking are related to the workings of the menu that come with the template; megastyle.css, fixed.js, megamenu.js & accordion.js. I've had a look through them and nothing shouts out at me, but I'm no js guru. I've posted the contents of all three files in the following pdf file rather than post here and make a loooong post. I hope this throws some light on it all.

https://v45.co.uk/ect/hamburger-menu-issue.pdf

I will check back in the morning - UK time.

Thanks for taking the time to have a look.

Steve
Bolton Lancashire England

I spotted that in just a moment actually... It is indeed the "=" sign and that's a little unusual I think.

quote:

---

.menu-mobile:after {
content: "=";

---

You can easily change that to an image...


.menu-mobile:after {
content: url('images/hamburger-with-meat.jpg');

You might also use an HTML entity

https://dev.w3.org/html5/html-author/charref

.menu-mobile:after {
content: '\02261';


That should do it...
David

Or use a Font Awesome Icon.

Gary

Gentlemen, thank you.

All's looking & functioning as expected & the chosen solution is the HTML entity.

Steve
Bolton Lancashire England

Thanks for all the input here and I've added the changes to the template download.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater