Skip to content

Fix Brand logo on mobile devices

Read this short1 text for a fun2 story3.

The brand logo (the main site title, per default "AlekSIS" in AlekSIS) is the main text in the materialize header nav bar. Currently, it doesn't appear on mobile devices. If you check it with developer tools, it seems to be where it needs to be, but you just can't see it. In the CSS editor, everything looks kind of ok. After some unsuccessful fiddling around with opacity, display and position, you think of the solution to a number of those problems4: z-index! You notice everything else seems right (including the x- and y-axes), so the problem has probably something to do with the remaining axis. You remember there were z-index problems a while ago5, so you think it's a pretty quick fix and write z-index: 99999999; on this element in your browser's developer tools.

Shockingly6, nothing happens.

So something has to be off. After checking both7 materialize documentations (the new and the old one) and some materialize live demo page (click here8) and comparing the CSS and HTML carefully, you find a z-index of -5 on the .nav-wrapper element. This only applies to small screen devices. If you disable this style, the brand logo appears again magically. So now we did it, we found the error (cause negative z-indices of parents don't seem to work properly on children9) and can keep lying to ourselves that we are doing something meaningful in our lives10.

But no11.

There is more to this.

Well actually not really12, because I want to know the purpose of this. So let's dig in the source code and git blame13 our ways through it. So if we start int the master in the style.scss, we find an edit of @hansegucker which is doing something with the z-index. But after looking at it, it's only a refactor. So after some digging, we find the first appearance of this line in AlekSIS - in the merge of SchoolApps and BiscuIT14 under the old name BiscuIT- in one of the first commits. This doesn't really tell us why this was created, but only the source of this: SchoolApps (all most of the CSS was used from SchoolApps instead of BiscuIT). After some more digging, we finally find the real original source. You can find it here, but you have to have access to the SchoolApps repository (which is restricted due to reasons™15). I'm going to start a new paragraph for the in-detail explanation.

In original SchoolApps the brand title in the header navbar was implemented incorrectly (by me, @ZugBahnHof). The <a>should be inside .nav-wrapper which it isn't. To make it still clickable, the z-index of the navbar is set to -5. That's generally speaking fine if the brand title is at this (wrong) place. But the z-index caused some problems afterwards, so @hansegucker changed it to just apply to mobile devices. This meant, the brand title could now only be clicked on mobile devices, but viewed everywhere. Now fast-forward to some time in AlekSIS. @ZugBahnHof (me) notices the not clickability of the link on desktop devices5. But instead of noticing the z-index stuff, I notice the other big flaw here, the wrong position of the <a> element. After I fixed this, the link was clickable again, but disappeared on mobile devices, which I didn't notice16. Afterwards no one really noticed and/or changed something, so the problem exists until now17, but was now discovered and can be fixed (btw please don't ask (me) for any screenshots of anything).

I really hope you enjoyed the story (and the footnotes18). I'm now going to fix the problem (which'll probably takes a lot less time than writing this story…)

  1. Yeah not really ↩

  2. depends on the reader ↩

  3. I had to experience this, so you might as well… ↩

  4. I literally can't think of any other problem, but that's cool I guess. ↩

  5. Take a look at #427 (closed) ↩ ↩2

  6. Very shocking, indeed. I actually changed the value to an even higher number afterwards, in case any parent element had an extraordinary high z-index so I wanted to have an even larger one. This (sadly) did exactly nothing. ↩

  7. I may be not entirely sure, which materialize we are using… ↩

  8. Definitely a trustable link and not a virus. ↩

  9. Look here at stackoverflow ↩

  10. Or at least the dishes, there's always something to do with them. (BTW, does anyone want old cold coffee?) ↩

  11. Dramatic pause ↩

  12. A definitely not plot twist when you ever see one (what?). ↩

  13. Due to me not speaking git very well, I stack to GitLab's BLAME button. ↩

  14. I'd like to propose this to be pronounced /ˈkʊki/ ↩

  15. The TM in such cases most often means something like "I don't want to elaborate it, but you can probably think of it, cause this is a common term and/or situation.". Exactly this is the case here. ↩

  16. We really need to test our designs more often on all display sizes (especially on small screens, because most users are using mobile devices) ↩

  17. This is the second last footnote, I promise. ↩

  18. BTW I used GitLab's footnotes for the first time, I'm still not sure what to think of them (especially this little icon). ↩