Page 1 of 1

Problem With Header Nav Menu on Mobile!

Posted: Thu Jan 04, 2018 1:44 am
by TahMiD
When the page keep loading the nav bar look like this
Screenshot_20180104-073456.png (794.6 KiB) Viewed 1194 times
After the page loaded, the nav bar was ok.
Screenshot_20180104-073506.png (709.13 KiB) Viewed 1194 times
Why its looking like that? When Loading? Its looking ugly and poor. Can you fix that? :D

Re: Problem With Header Nav Menu on Mobile!

Posted: Mon Mar 26, 2018 5:47 pm
by admin
Hi TahMiD,

The reason why this issue is happening is because Google MDL framework uses JS to append a class is-small-screen to page container when it is viewed on small screen device. Once this class get added CSS will hide the main navigation menu thanks to this rule; .mdl-layout--large-screen-only {
    display: none;
You see the issue here! The framework JS file is loaded in the footer so the document will be rendered before loading and executing this JS file and thus before the special class gets appended.

The fix for this issue is very simply, we can use CSS media queries to detect the screen width and hide the main navigation menu below 1024px.

You just need to add this code to your custom CSS in Appearance => Customize or at the end of style.css file:
@media screen and (max-width: 1024px) {
	.main-navigation {
		display: none;
MDL relies heavily on JS and still in very early stage compared to Bootstrap 4 for example, that's why the new design and this forum design are built on Bootstrap 4. And more specifically this framework and I am pretty sure I will be using it to create any other material design theme :D I am not saying MDL is a bad framework, in fact, for a simple theme like Realistic, MDL is a better choice, it loads fast and very lightweight but for a full-fledged theme with tons of features, Bootstrap is far far more suitable for the mission.