How to fix a bug on iGEM Wiki template: side menu on mobile displaying automatically on page load

If you plan to use the template provided by iGEM HQ this year (2018), you might need to switch off the auto display of the menu bar on mobile or any narrow screens. This unofficial guide will help you quickly fix this bug.

Warning: The fix has been approved by the iGEM HQ, but please proceed with caution anyway.

Full screen of the menu on the mobile! Where is my content?

Thanks to Ana Sifuentes, the visual designer of iGEM HQ, this year all participating iGEM teams receive a visually appealing Wiki template to begin their journeys on the International Genetically Engineered Machine Competition (iGEM) over the summer.

Ana and her team have delivered a stunning job here. However, as we all know, a tiny bug in the computer code could cause havoc in the whole software. Unfortunately, front-end website development is notoriously prone to these disastrous bugs … and most of the time you have no ideas what go wrong!

No more prelude, let’s jump to the point!

The Problem

On page load of the screen with a width of less than 500 px, the menu will automatically open and fill the entire screen. The user has to manually close the menu to see the page content underneath. See it in action below, or you can try it yourself here.

The Quick Fix

Login with your credentials and go to the URL below with UCopenhagen replaced by your team name.

http://2018.igem.org/wiki/index.php?title=Template:UCopenhagen&action=edit

Search for

<div class="igem_2018_team_menu displaying_menu">

(It is on line 540.)

and delete

displaying_menu

Then, you’ll have

<div class="igem_2018_team_menu">

That’s it! No more menu filling the entire screen on page load. 🎉🎉🎉

Let’s see the edited version on our wiki: http://2018.igem.org/Team:UCopenhagen 👀

An additional fix

If you feel that filling the whole screen with the menu is a bit too much, you may adjust its width by changing the parameters as shown below.

We’re still in the same template file. Find these lines.

@media only screen and (max-width: 500px) {
  .igem_2018_team_menu {min-width:100%; width:100%; }
 }

You may change the min-width and width to anything you wish. For example,

@media only screen and (max-width: 500px) {
  .igem_2018_team_menu {min-width:80%; width:80%; }
 }

The result will look like this.

Let there be some space to the left 👈! Why not visit Our Wiki to see the full content http://2018.igem.org/Team:UCopenhagen?

I hope this help fellow iGEMers. If you find a better way around this issue than this, please let me know in the comment below.

I will be writing more articles on Wiki development and other iGEM topics, mainly all things involving programming and project management soon.

Please subscribe to our publication iGEM Copenhagen on Medium, our Facebook page, Twitter, and Instagram to receive the updates.

I am a member of University of Copenhagen iGEM 2018 team. We are working on a protein production and purification system for the colonization of Mars, called PharMARSy system. PharMARSy is a protein production system that uses the disease-causing bacterial injectisome (Type III secretion system) as a molecular syringe to inject a specific protein, freshly made from a microbial factory, through a biomimetic membrane. PharMARSy allows for both production and purification of the protein — all in one. PharMARSy can work on Earth as well.

To know more about our project, please keep your eye on our website and our wiki (not much content there right now).

As of June 2018, we have received support from Department of Plant and Environmental Sciences, University of Copenhagen, SnapGene, and IDT.

If you’re interested in supporting us, please contact us at igemku2018 [at] gmail.com. We greatly appreciate all kinds of support in the making of our PharMARSy.