[Resolved] Fixed Mobile Header With Modals

[Anthony]

I’m wondering the best way to pull off what I’m doing here: http://www.cukebook.org

On mobile, I’m going for an App look as the plan is to eventually make it into a PWA. As you can see there’s a Thumb Menu Fixed to the bottom and a Top Menu fixed to the top.

The Fixed Top Menu changes depending on what page you’re on and right now is being done with a few different Header Elements. The reason I went with Header Elements for the top fixed menu is that I’m using the Site Title Template Tag to display the Title. Would it make more sense to do this with hooks? And maybe try and add the template tags to the hooks somehow?

The Thumb Menu is just a hook that’s fixed to the bottom of the screen and seems to be working fine.

I guess I’m wondering if this is the best way to do these two menus.

The biggest problem I’m seeing that really frustrates me is that on mobile when you click over to a page like /recipes, where there’s a ton of stuff to be loaded, it lags so bad it literally shows all the modal content for a good second before loading the page. The two models are the “i” icon and the magnifying glass icon.

Currently, their scripts are being loaded in the footer. Should I consider loading them in the header?

I’m using the GP Off-Canvas Overlay on all pages as well (The cucumber Logo in the Fixed Bottom Menu), yet that content never flashes on the load. How is that off-canvas menu created? Maybe I should consider something like that?

Thanks in advance for any sort of direction.

Anthony

[Tom]

Hi Anthony,

Hook Element and Header Elements are basically the exact same thing – if you have it set up as a Header Element, I wouldn’t both switching it all over to a Hook Element.

We prevent the Off-Canvas panel from flashing on load by hiding it with an inline style: style="display: none".

This means it’s hidden as soon as the element is rendered – it doesn’t have to wait for javascript or even a CSS file to hide it.

You could also hide it in a CSS file as long as it’s loaded in the head.

[Anthony]

Thanks! That all makes perfect sense except I cannot seem to get it to work for me.

Here is the HTML that’s in the Header Element (I’ve added the inline display: none; to the two Modal Divs:

<div class="app-top-bar hide-on-desktop hide-on-tablet">
	
<div class="top-bar-left">
	
<button onclick="goBack()">
ICON IMAGE
</button>

</div>

<div class="top-bar-right">
	
<div>
<button id="mod-btn-2">
ICON IMAGE
</button>
<div id="myModal2" class="modal2" style="display: none!important;">
<div class="modal-content2">
<span class="close2">&times;</span>
MODAL CONTENT
</div>
</div>	
</div>	
	
<div>
<button id="mod-btn-1">
ICON IMAGE
</button>
<div id="myModal" class="modal" style="display: none!important;">
<div class="modal-content">
<span class="close">&times;</span>
MODAL CONTENT
</div>
</div>	
</div>	
	
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
ICON IMAGE
</button>
<div id="myDropdown" class="dropdown-content">
MODAL CONTENT
</div>
</div>
	
</div>
</div>

and the JS (There is two of these for two Modals)

<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("mod-btn-1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

As you can see here: https://drive.google.com/file/d/1_zCXF44nH_pR9eby4NdpMyeD6HC8tPBW/view

Not only is the Modals flashing, but the #mobile-header is as well. Right now I have the Mobile Header only on the homepage, then once you go into any subpage it’s hidden.

Is there any way to remove it entirely instead of hiding it with display: none;?

Side note: there is little caching going on at the moment so that is also drastically making this worse.

I’m working on a new Caching setup and CDN so I’m kind of in the middle of that.

Thanks

[Tom]

Super hard to debug, unfortunately.

If you remove the modals, does the flash go away?

[Anthony]

It seems to still do it without the models and the one dropdown removed.

It also seems to do it way worse on the /recipes page which as a ton more DOM elements. But I do notice it slightly on the other pages.

I’ve left all the Modals and the Dropdowns off the /recipes page for now.

[Tom]

You have quite a lot of CSS defined in the footer of your website, which will cause flashes of unstyled elements like this until the browser reaches them.

Maybe you’re using a plugin which moves CSS to the footer to improve performance?

[Anthony]

I had been messing around with: https://premium.wpmudev.org/project/wp-hummingbird/

The plugin allows you to easily move CSS and JS to the footer, but I disabled it 2 days ago. Does it all stay in the footer even though the plugin is disabled?

I’m going to be trying my best to inline critical CSS and maybe I need to figure out what CSS is responsible for the Header Elements?

[Tom]

If the plugin is disabled it shouldn’t still be doing it.

Any server caching that might be serving the cache from when it was enabled? Another plugin doing it maybe?

[Author]

Posts