Disabling Side Menu & Mobile Switch for Specific Pages

[ILLUMINICE]

Hello,

I have a quick question regarding the side menu and mobile switch…

I’m trying to find the most efficient way to completely disable the side menu and mobile switch (along with the changes the mobile mode makes to the header), but only on specific pages.

You’ve done a great job of adding lots of page specific settings and exceptions, but this is something that is missing.

I know I can use css to hide things, but it would be a lot easier if this could be done with a setting for a specific page. It’s always better not to load content in the fist place instead of just hiding it. Perhaps this can be accomplished within functions.php?

….

On a side topic I’ve noticed something strange with regards to my css overrides in this theme. It seems that any custom css I use in my child-theme (especially when hiding things) does not immediately get loaded when the page loads. Whenever I load a page with a hidden element I can briefly see that element before my css is apparently processed. I’ve noticed the same thing on other types of css adjustments. This causes things to momentarily flash on the screen of shift positions.

I’ve worked with dozens of WordPress themes before and have never seen this occur. Do you have any idea what would be delaying my child-theme css from getting rendered immediately?

~ Michael

[Laura]

Hello,i think the best is css, as you said. That would be easier 🙂
About the load of css, that is usually related to cache, as the page didnt clear cache yet or didnt load new changes, then you dont see the changes. So i would suggest to turn page cache off or clear cache after all changes

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ILLUMINICE]

Hi Laura,

I appreciate your response, but I think you missed the point on both points…

Completely disabling all of the responsive changes that occur with the mobile switch (and it’s side menu) is actually quite complex with css alone. I am more than capable of doing it, but it will be rather inefficient. I would much rather have a way to disable the mobile switch from being active in the first place, but to limit that to a page of my choice. This should be possible from within functions.php. I’m a front-end developer and css expert, but do not know enough php to to figure this out on my own.

What I am trying to do is keep the standard header (no mobile switch, no side menu, and no responsive css changes associated with the mobile switch), but to limit this to a page(s) of my choice. I am using the side menu within the website, but must have it completely deactivated on entry-type pages (like my login/register page). As I said, doing this with css alone is going to be complicated and there are other problems as well (particularly the css overrides delay problem, please continue reading below).

….

Regarding the problems I’m having with my custom css overrides…

I think you’re misunderstanding what is occurring here. I don’t have any caching enabled on the site right now (because it’s in development). Usually I use WP Rocket, but I have it disabled for the moment. As for my web browser’s cache, I clear that 50 times a day while I work.

The problem here is that my css overrides within style.css of my child theme are not being executed before the page renders in the browser. I have lots of custom css, and many of those changes either hide elements completely, or relocate them. When I load the site my changes are not being rendered immediately. I see the original css first and then a moment later my custom css kicks in. For example, in the header I have set my left/right menus (I’m using the header format with the logo in the middle of two menus) a further apart from each other than the original theme’s css. When the page loads I first see the two menus in their original positions, and then a second later I see them shift outwards as my custom css is read by the browser. This is also occurring on elements that I have hidden with css, which briefly appear than disappear on the screen.

I’ve never seen anything like this occur with css overrides in a child theme. Usually by the time the page renders and is visible in the browser those overrides are processed and you don’t see the original css. But something in this theme is causing the child-theme css to render late. It’s not a plugin I’m using, or any form of caching. It’s something native to the theme itself.

I am aware this theme has some speed related features to it, and perhaps they are responsible. I simply do not know. But this is a serious problem as I can’t seem to use custom css without it causing visible shifts and flashes on the screen.

Please, elevate this ticket to a higher level if necessary. I must find the source of this css rendering delay, or I’m in big trouble here.

P.S. This is also partially why I don’t want to use css to deactivate the mobile switch and side menu features. If I do, you will see the header first in mobile mode for a split second, and then change back as the css overrides are processed. I hope you understand what I am trying to describe here.

~ Michael

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ILLUMINICE]

Thank you Laura! I really hope we can figure out this css delay issue. It’s a nasty little problem to have, especially on a site as large as I am building.

~ Michael

[Abe]

Hello, try to check the kleo-child/style.css file in the view source mode in your browser if it is loaded after all the CSS files, which should be the default behaviour. It makes no sense to appear after a little while…only if for some reason the CSS file is big and takes a while to load.

I am thinking of a solution to disable the sidemenu on the page level and let you know.

Related to the mobile menu, you want it to show like on the desktop?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ILLUMINICE]

Hi Abe,

I just checked the loading order of the child theme css file, and it is being loaded last like you said. The only non-standard thing I did with the child theme was to change it’s name (the child theme folder name). But I made sure that style.css was correctly pointing to the child-theme folder. I haven’t had any issues with the child-theme at all, other than this strange delay.

This delay issue is a very serious problem. The more custom css work I do, the more pronounced and widespread this problem becomes. Literally everywhere I have custom css (especially hiding elements or moving them), you can see those changes kick in late, about a second after the page loads. I’ve never seen anything like it before on any other site I’ve built.

The css file of the child theme isn’t large (yet). I think I’m at about 1,300 lines. But I’ve had child theme css files as high as 7,000 lines without seeing this problem. There’s something else causing this. I’ve tried many things here to find the problem with no success. Have you seen this with other implementations of Kleo?

Here’s a test you can do on your end to replicate this…

Set the header to the style with the logo in the middle of the two menus. So there’s a primary and secondary menu. Then set the menus to be wider apart from the logo with this custom css in the child theme:

COPY CODE

@media only screen and (min-width: 991px) {
	div#header div.navbar div.sticky-wrapper div.kleo-main-header.header-split div.container div.navbar-header {
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		flex-basis: 70% !important;
	}
}

All you then need to do is see of the menus shift outward when loading the page. You would see them close to the logo first, and then shift outwards as the custom css kicks in. That’s exactly what is happening here. This kind of problem is happening everywhere I have custom css.

….

Regarding disabling the side menu / mobile header on specific pages:

Thank you for helping with this. You can understand why I’m trying to avoid more css overrides, considering the problem above. What I am trying to do is maintain the standard header on my entry pages (like login/register). In other words, I don’t want the side-menu button to appear, or the logo to shift to the left, and all the responsive changes that are occurring related to this.

If you’re wondering, I am only displaying our logo on our login/register page in the header. I managed to hide the primary/secondary menus without using css overrides (because of the above problem). What I did for that was create a WordPress menu with nothing in it, and then assigned it to that page. It worked very nicely. But I still need to prevent the mobile header features from occurring on those pages.

I hope that clears it up for you…

Thank you for all your help!

~ Michael

[Abe]

I haven’t see this in any tests or clients site..

The change on the header in the mobile view comes from the fact that the responsive CSS is enabled so only an override will change it. There are many styles to remove since it inherits from bootstrap some styles.

Can you try to add your overrides in Theme options – General settings – Quick CSS ?

A link to your site will help to check

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ILLUMINICE]

Hi Abe,

Before I respond to the topic of this ticket, I have a quick side question…

I noticed in all of theme settings that the on/off switches display the opposite of what they’re set for. In other words, if an option is to “On,” you actually see “Off.” I’ve seen this kind of thing in other theme settings before. Is this by design, or is there some kind of problem on my site? I should also note that you can only see one half of the switch at a time (either on/off) depending upon how it’s set.

….

Regarding the css delay issues:

Did you try the css override test with the code I supplied in my last post?

I just did my own test here using the Quick CSS feature in the theme options as you suggested. It made no different whatsoever. The identical delay problem occurred. I also confirmed that the Quick CSS was being rendered, and not my original override. Apparently it makes no difference whether the Quick CSS is used, or style.css in a child theme. On that topic, I do need to use a child-theme as I will ultimately have thousands of lines of custom css.

It would really be helpful to determine the cause of this if you can perform an override test on your side using the same css I supplied. If you don’t see this problem it may indicate another cause in my installation. I hate to think this is from a plugin, but at this point I won’t rule anything out. I have noticed here that the delay in the custom css loading isn’t the same for each page. The larger the page (more content), the longer the delay is. It really looks like the style.css in the child-theme just gets loaded too late.

I’d rather test this on my side and not provide access to the site for now. I’m developing a large-scale website that must remain private for the time being. I’m sure you understand.

….

Regarding hiding the mobile header for particular pages:

I just confirmed essentially what you said. The side menu is just an alternative responsive css feature for the header. Whether it is enabled or not, the header will always change responsively to display a mobile version of some sort.

This means I am back to square one, with using only css overrides to solve this problem. I can do this, but like all of my custom css there will be a delay problem. I need to get that solved or any custom css I use will show an unacceptable delay/shift.

~ Michael

[ILLUMINICE]

Hi Abe,

Please read my previous post first…

I had a thought here as to a possible solution:

No matter what the cause of this delay is, perhaps the solution is simply loading my child theme css first, before the theme css. I am in a position to do this because I do use !important on literally every single class in my custom css. I’ve been using !important across the board for custom css for years and it’s always worked well for me.

Usually child theme css is loaded last so that one doesn’t need to use !important everywhere. But since I’m already doing this perhaps I should just load it first, before the theme css. This may even work better for speed since I will ultimately have so many overrides.

What do you think?

~ Michael

[ILLUMINICE]

Hi Abe,

Please read my previous posts first…

I tried loading my custom css file first and was amazed to find this did NOT work. I really thought that would have made the difference, but it had no effect. Btw, I found this really neat plugin for easily changing the loading order or JS and CSS files without messing around with functions.php. If you want to check it out: https://wordpress.org/plugins/re-order-css-and-js-loading-order/

It will definitely be helpful to know if you can recreate my problem on your end. I’m going to continue testing here in hopes I can find the source of the problem.

~ Michael

[Abe]

Very strange, I think you have a script or something delaying the load of the css but it is stranger if the parent theme css loads fine.

You can use !important if that solves and probably with the plugin mentioned you can move it up in the css files order.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ILLUMINICE]

Hi Abe,

I agree, this is one strange issue, and right now it’s my single biggest concern on the site. I’m developing what is going to be a very high trafficked website, and this loading issue is a little scary because I don’t know the cause. I’ve never seen anything like this before.

I don’t know if you read all of my last posts, but I had installed a plugin that allows me to reorder any of the JS scripts or stylesheets. Right now this is my best bet for troubleshooting. I did try loading the child-theme css first (before the parent theme css), but it made no difference at all.

I think you’re correct that this may have to do with a script. The problem is that it’s like looking for a needle in a haystack. There’s a lot of scripts that could be causing this.

Did you ever try testing the css override I provided to see if you could duplicate this problem on your end? It would be helpful to know this, as that would tell me whether or not it’s something in the theme itself.

I’m going to get back to this issue starting early next week. I have something else I need to finish here first. If you can do that css test for me I’d appreciate it.

I’ll let you know what I discover here as well when I start testing. Just please give me a few days on this.

…..

P.S. I had this unanswered side question for you:

I noticed in all of theme settings that the on/off switches display the opposite of what they’re set for. In other words, if an option is set to “On,” you actually see “Off.” I’ve seen this kind of thing in other theme settings before. Is this by design, or is there some kind of problem on my site? I should also note that you can only see one half of the switch at a time (either on/off) depending upon how it’s set.

…..

Talk soon,

Michael

[Abe]

Hi, maybe I can test somehow on your site directly since it is hard to reproduce locally.

The on/off should be by design. Give me a screenshot, maybe it is different on your side 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ILLUMINICE]

Hi Abe,

Thanks for getting back to me about all of this…

First, regarding the theme’s option switches:

I have just attached a screenshot here that shows how the switches appear on my end. As you can see only one side of the switch is visible at any time. I’m not sure if this is by design, but I always prefer a switch that displays both sides, and indicates the one selected with a different color.

The more confusing aspect of this is that the on/off option displays the opposite of what it’s actually set for. If the option is set to “On” for example, than what you actually see is “Off.” I don’t know about you, but this is very counter-intuitive to me. Assuming you’re only supposed to see one half of the switch (as is in my screenshot), it would make more sense to see what the option is currently set for (and not it’s opposite).

I have a feeling that perhaps I’m not seeing this as its supposed to be. Please do let me know!

Regarding our much more serious css loading delay problem:

It may become necessary to let you into our site to look at this, but I’m not quite there yet. I’m developing a new platform here, and it’s best not to allow any third party access for now. Of course if I can’t solve this myself, I may be forced to let you in to help.

I have done some testing using this plugin:
https://wordpress.org/plugins/re-order-css-and-js-loading-order/

I tried changing many loading orders, including having the child-theme css load first (ahead of the theme’s css). This made no difference. I’ve tried changing around the various scripts, and also no luck. It seems that no matter what order things are loaded in this problem persists.

I’ve also tried using the Timeline feature in Chrome’s inspector to narrow down the problem. You can clearly see the frames where the original css loads first, and then is later displaced by my custom css. But I haven’t been able to figure out the source of the problem with this tool.

The author of the plugin above said this sounds like a bad case of “Render Blocking.” I have noticed that this problem is present on every page of the website, even those without isotope post-grids (from visual composer). It looks like something in the background is causing the delay. The loading delay does vary as well, based on the size/complexity of the page, but it is there site-wide.

My next steps are to start deactivating plugins one by one to see if they are somehow the cause.

Are you sure you’ve never seen this before? You would only see it if you had heavily modified things (like in the header). This is why I asked you to test on your end with a large css override. All you would need to do is set something to hide in the header, or to be in a different position. Do this only with a css override in the child-theme. If you see a shift/delay on your end, this is indeed a theme related problem.

I’ll get back to you as I test further. Please be patient, as I am working on many things here at once. This is a serious problem for me though and I must get it solved no matter what.

My thanks again for your help and patience!

~ Michael

Attachments:

You must be logged in to view attached files.

[Abe]

Hmmm. those switches look strange. Maybe it is caused by some other plugin. Here is how they should look, see attach.

I haven’t seen something like that about the loading issue and doesn’t make any sense to me. I think starting to disable plugins is the best thing. Try doing the tests on a page that has small content and no videos or heavy images.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ILLUMINICE]

Hi Abe,

I’m actually glad to hear that the switches look like they’re malfunctioning to you. This means there must be a conflict occurring somewhere, and now I can look for it. I would welcome some better working switches.

Btw, you forgot to attach the screenshot of how the switches should look.

….

I agree with you that the next step here to diagnose the loading problems is to start deactivating plugins one by one. I’ll be taking care of this shortly, likely tomorrow.

With a little luck I’ll have some answers this week as to what’s causing all of this.

I’ll be in touch…

~ Michael

[Abe]

Hi, sorry for the missing attachment. here it is

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

Attachments:

You must be logged in to view attached files.

[ILLUMINICE]

Hi Abe,

Thanks for sending the screenshot. Well, this figures. I had a feeling this was malfunctioning on our site.

I’ve been pretty overloaded here the last 24 hours with other work. But I plan to start my conflict testing today. The good news is that I can test for this conflict and the loading delay issue at the same time. Perhaps we have plugin conflicts causing both problems.

I will get back to you with the results of my testing. Hopefully I can get this done within the next 24 hours.

I’ll be in touch!

~ Michael

[Author]

Posts