TOC not rendering on Mobile or Tablet

@mwiesner

Their CSS is incorrect. Try this:

@media (max-width: 800px) {
	#ez-toc-container ul {
		display: block;
	}
}

The !important flag breaks the collapsing/expanding of the TOC.

Hey Shazahm1,
Thanks for the reply.
I tried the suggested code, cleared the cache and tested the page below again on my mobile, but still no luck.
https://groomandstyle.com/how-to-increase-your-homes-value/
Any other suggestions?

Note: this was working, with the suggested code from the mythemeshop team, before I updated to the latest version of wordpress 4.9.6.

Cheers again,
Marc

@mwiesner

Please make sure the CSS is saved in the theme’s custom CSS area. Presently the CSS I gave you is not found in any CSS file being served from your site. After you have verified this, ensure your Autoptimize files are refreshed.

Hey Shazahm1,

I added the code, where the MyTheme Shop suggested.
From wordpress I went to Appearance->Theme Options->Styling Options->Custom CSS
“You can enter custom CSS code here to further customize your theme. This will override the default CSS used on your site.”

I just saved the code again, and then went to Settings->Autoptimize Settings “Save Changes and Empty Cache”.

But still no luck…

Cheers Marc

@mwiesner

Try this instead:

@media (max-width: 865px) {
	#ez-toc-container ul {
		display: block;
	}
}

?? still no luck…

@mwiesner

Ok, try this:

@media (max-width: 1024px) {
	#ez-toc-container ul {
		display: block;
	}
}

Nope, TOC still not expanding…

@mwiesner

Ok, a slight change of tactics, try this

@media (min-width: 0px) {
	#ez-toc-container ul {
		display: block;
	}
}

Tried, no success though…

Sorry, I’m out of guesses. For whatever reason it does not appear that trying to override the theme’s style is working.

Is the fact that is stopped working after the latest wordpress update help? If I gave you login access to the site would that help?

Cheers Marc

I do not see how a WP update would be an issue. It is a style being applied by the theme which hides all ul lists in the post content when the screen size is smaller than 865px. This to me seems like an unusual design choice. I can see specifically and selectively hiding specific lists, such as menus.

Hmmm… this just reminded me. In the 1.7 update of ezTOC I wrapped the TOC list in a nav element. This was requested by users to improve SEO. Having multiple nav elements is proper and in spec as you can have a main menu nav and a sub nav such as a TOC.

It was this ezTOC update which caused this issue for you, not updating WP.

Removing the nav element from the TOC would be a step backwards for everyone. So I am very reluctant to do that.

The better change would be to edit the theme to be more specific with its CSS selector.

Currently it is this:

	.main-container-wrap nav ul {
	    width: 100%;
	    display: none;
	    height: auto;
	}

Changing it to this should correct the issue permanently:

	.main-container-wrap header nav ul {
	    width: 100%;
	    display: none;
	    height: auto;
	}

Making this minor change makes it so only the nav in the site’s header is affected instead of all nav lists.

The file can be found in this folder on your server:

../wp-content/themes/newstimes/css/responsive.css

The lines are 188 thru 192. The only change is adding header to the selector.

If you make this edit, make sure to flush AO and your CDN otherwise you may not see the change.

Hope this helps!

• This reply was modified 6 years, 10 months ago by Steven.
• This reply was modified 6 years, 10 months ago by Steven.

Ok, will this change work if I make it to my child theme?

@mwiesner

You’ll have to ask the the theme’s support team.

You could try duplicating the file and put it in a matching folder path within the child theme and then make the change to see if the theme will automatically pick up the child theme CSS instead of the parent. I have doubts that this will work though as the parent theme would have to been specifically coded in order to do this (I think, I’m a plugin dev, not a theme dev ?? ).