Mobile Menu, Font Awesome, Header Text Overlap

Hi there,

1) The mobile menu shows the first menu option then like this: About…. Is there a way to have the more typical hamburger menu design instead?

You would probably be able to do that if you create a child theme and modify the files that control how the menu on mobile works. I’m not able to help you with those types of changes, though, so you might need to hire a developer to help with that if you’re not able to make this type of change yourself.

2) I see in the theme description that we can use Font Awesome icons. When I use the <i class=”fa fa-phone”></i> in HTML for a page, the icon does not show up. Do you have a solution for that?

Are you using the block editor or classic? It looks like there’s two issues here:

First, there’s a bug with the Classic editor that causes the Font Awesome code to get stripped out, as the editor doesn’t like empty i tags. There’s an open bug report for that in https://core.trac.www.ads-software.com/ticket/28940

It looks like the current workaround is to add an empty HTML comment inside the i tags, like <i class="fab fa-accessible-icon"><!-- comment --></i>

Adding the code in a HTML or paragraph block in the block editor that doesn’t happen.

But it also appears that Font Awesome has upgraded to a brand new version. Pique is still using version 4.7 of FA, so the new icon code from version 5 won’t work in the theme.

I’ll report this to our developers so they can look into updating the theme. In the meantime you might want to try using a Font Awesome plugin instead.

https://www.ads-software.com/plugins/search/font+awesome/

3) When the site opens the menu overlaps with the entry content and then the screen flashes and the two pieces separate. Is there a way to prevent that?

I don’t see any overlap between the menu and content on my test site. Can you please provide a link to the post/page on your site where this is happening, and/or provide more detailed instructions how to replicate the issue, including the browser and device/screen size where you’re seeing this?

Can you let me know what the default font size is for the Pique theme for paragraphs and the footer? It looks much larger than 12px so I’m assuming that’s the case.

The font size for the footer is 1.2em, or 19px.

The font size for pagagraph text in a regular page panel is 18px.

You can use the browser inspector in Firefox to easily find font sizes yourself.

Using Firefox, right-click on the text in question and select Inspect Element. Once the browser inspector opens, look at the tabs top-right – it should start with Rules, Layout, Computed. Last in that list is Fonts (it might be hidden in a drop-down menu behind an arrow). That will show you exactly which font, and at what size, is used for the text you have selected.

Thanks – I didn’t click on the down arrow and hadn’t seen the font sizes. I have another question:

The navigation menu overlaps the home page entry content when the site first opens, then the screen flashes and the two separate. I read that it may be from using CSS to have a larger site logo so I removed that language and it didn’t resolve the issue. It happens with Firefox and Chrome on a desktop and Safari on a cell. It’s for this site: aeminsurance.com

Do you have a solution?

Hi there,

That’s expected behavior. The theme is first loading all the content and then it applies styling (CSS). This way you won’t be starring at a blank screen while the site is loading.