Problem With Header Nav Menu on Mobile!
Topics related to Realistic theme goes here.

TahMiD Borhan

Member Rank
Posts: 41
Joined: Mon Dec 11, 2017 12:37 pm
Display Name: TahMiD Borhan

Problem With Header Nav Menu on Mobile!

linkPost by TahMiD » Thu Jan 04, 2018 1:44 am

When the page keep loading the nav bar look like this
Screenshot_20180104-073456.png
Screenshot_20180104-073456.png (794.6 KiB) Viewed 781 times
After the page loaded, the nav bar was ok.
Screenshot_20180104-073506.png
Screenshot_20180104-073506.png (709.13 KiB) Viewed 781 times
Why its looking like that? When Loading? Its looking ugly and poor. Can you fix that? :D
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: Problem With Header Nav Menu on Mobile!

linkPost by admin » Mon Mar 26, 2018 5:47 pm

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.is-small-screen .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 Themient.com design and this forum design are built on Bootstrap 4. And more specifically this framework https://fezvrasta.github.io/bootstrap-material-design/ 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.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Mon May 20, 2019 3:06 pm