Enterprise Pro menu icon not showing up on mobile layout

[larry]

Hello, I'm having a rather strange problem with the Enterprise Pro theme. When the theme's smallest layout is viewed, the icon that should indicate the main menu doesn't show up.

In the theme demo the icon for the main menu on a small screen is three horizontal lines.

When I try my site on Chrome for Android nothing shows up, on desktop IE nothing shows up, and on Safari a thumbs up icon shows up.

Here is my site: http://ieltsbootcamp.com/

I'm guessing the problem has to do with me changing the font family to helvetica. But I'm not sure why that would cause the icon to disappear. I'm guessing the problem is somewhere here... I just can't figure it out.

#responsive-menu-icon {
cursor: pointer;
display: none;
padding: 17px 0 18px;
padding: 1.7rem 0 1.8rem;
text-align: center;
}

#responsive-menu-icon::before {
-webkit-font-smoothing: antialiased;
color: #fff;
content: "\e00e";
font-family: 'Helvetica', sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
margin: 0 auto;
speak: none;
text-transform: none;
}

I searched for this problem on the forums but couldn't come up with anything.

Any help would me much appreciated! Thanks in advance for any help or clues you can give me.

http://ieltsbootcamp.com/

[Tom]

Hi Larry,

the icon for the main menu on a small screen is three horizontal lines

Often called a 'hamburger'.

You've changed the font declaration in your CSS for #responsive-menu-icon::before

Change: font-family: ‘Helvetica’, sans-serif;

Back to: font-family: 'Icon';

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[larry]

Thanks for the help Tom!

Unfortunately, it still isn't showing up after changing the font family back to Icon. My hamburger is still missing.

I must have messed something else up in my ham-fisted earlier attempt at editing the CSS.

I think I'll just reinstall the theme and see about making the edits again. Maybe I can avoid messing up the hamburger this time.

Thanks again for your help though!

[Tom]

Hrmm.
I can see that you've changed the CSS.
The menu media query remains stock code.

But,
In my desktop browser: it's fixed.
In chrome on my iPod: it shows a 'thumbs-up' icon
On my android tablet: still broken -- although, if I tap where the menu icon should be, the menu opens.

Is it possible you've nuked the font-family: 'Icon' from the fonts folder?
(look in "\wp-content\themes\enterprise-pro\fonts")

Otherwise, before you nuke your whole theme install, (choose the path of least effort) you could just reload the original style.css and make new changes or:

• do a diff of the original style.css against what's on your server
• upload a fresh copy of the original style.css
• apply the changes in blocks of the changes to narrow down any other conflicts

Or, since the changes haven't been extensive, chalk it up to experience?

Sorry, I'm not seeing something that would cause these symptoms. Maybe someone else will jump in with a new set of eyes?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[larry]

Howdy Tom,

I think you are right, I messed up the @font-face import. I ended up reinstalling the theme, which is how I ran across my mistake.

I hadn't made all that many edits so it was pretty easy to go back and retrace my steps.

It's all sorted now, I think I'll just chalk it up to experience.

Thanks again for you help, it's much appreciated!

[Author]

Posts