2nd Level Sub-menu Not Showing on Mobile

Steve_Dillon · August 2018

I have 3 pages that are sub pages of Our 3D Printing Solutions, but when the site is viewed on mobile the sub menu flyout only goes down one level. It doesn't show the 3 pages that are one more sub level down.

The markup is there, how do I show this on the front-end?

https://postimg.cc/image/4u4qgssx7/

Ref link: https://saratech.com/hp-3d-printers/

Pablo · August 2018

Hi,

1) Disable all of the plugins

2) Fix HTML issues

http://prntscr.com/khx4ff (Text with red color means that this is the issue)

3) Switch Child theme to Parent theme

And check if this helped.

Thanks.

Steve_Dillon · August 2018

Please provide more feedback than this.

1. I'm not going to disable all of the plugins, that would significantly effect the appearance of a live website. If the problem is with the WP Contact Slider then I can just disable that one and contact the plugin developer about the issue as well.

2. What HTML issues are you referring to? You say: "Text with red color means that this is the issue" but you have commented code highlighted in red text....? How are comments the issue?

3. I'm using a child theme to redirect URLs for some migrated blog content. That's not affecting the mobile drop down sub-menu so switching it won't make a difference except to stop redirecting the URLs.

Pablo · August 2018

1) You can turn on a Under Construction mode for a while and test all of them, this can be fault of other plugins too. There is a warning in console, so something is wrong with it (http://prntscr.com/kicxwh)

2) Every issued HTML code can cause problems.

3) One of your theme modifications can effect the menu too, I want to be sure that this is not fault of the Child Theme, so please, follow my steps...

4) The menu isn't showing at mobile at all(http://prntscr.com/kicxid)

Thanks

Steve_Dillon · August 2018

1) No, I can't. This is a live website for a company. I can't disrupt the front-end web view. I have created a development site here: http://dev.saratech.com which I can use for testing.

2) Please be more specific in your responses. I know all HTML can cause problems, but I asked you specifically which HTML issues were causing problems. Specifically, what code since you highlighted various types of code.

3) I will deactivate this on the dev site, but it's not affecting it.

4) The menu isn't showing on tablet. It IS showing on mobile. Please be more specific in your responses. It's not showing on tablet because the index CSS below is turning it white. Is there an override for this code Theme Options??

#Top_bar .responsive-menu-toggle, #Header_creative .creative-menu-toggle, #Header_creative .responsive-menu-toggle {

color: #ffffff;

background: transparent;

}

Steve_Dillon · August 2018

Yea, this whole issue is your CSS. Super frustrating when you're trying to get me to turn off plugins, disrupt the entire appearance of my whole website, switch child themes, etc. THE WHOLE TIME IT WAS CSS!! From what I can see it's not due to any CSS that I have added, but even if that was the case that should have been your first response instead of telling me to disable all plugins on a live site.

Here's the problem:

1. The burger menu is being set to color: white that's why it cant' be seen above 425px

2. The mobile flyout menu is not wide enough to show the second level drop down menu

Your div#Side_slide has a width of 250px which is not wide enough to allow room for the toggle menu to expand to the second level sub-menu. If you set the width to 275px you will see the sub-menu toggle show up next to Additive Manufacturing > Our 3D Printing Solutions > HP 3D Printers, etc.

However, if div#Side_slide is set to 275px then the corresponding element style needs to match that when the menu is closed. I'm not sure where to change that and I really don't have the time to correct your theme. Kindly advise me how to fix it. Or if there's an override in Theme Options for all of this.

element.style {
right: -250px;
}

Bryan · August 2018

Hi,

well you can easily change the width of the side-slide menu in theme options>responsive>header.

You have added css that increased the size and the weight of the menu, as well as added icons so the submenu wouldnt be able to contain it. Please just change the width.

Also, we always suggest that you disable all of the plugins because it helps in 80% of the cases that have "weird bugs". The downtime of the website would be about 2-4 minutes.

thanks

Steve_Dillon · August 2018

This should have been your first answer back to me:

well you can easily change the width of the side-slide menu in theme options>responsive>header.

Not disabling plugins. Any amount of downtime for a live website is unacceptable and should be avoided at all costs, especially if it's to fix something as small as a drop down nav on mobile.

Specifically which CSS have I added that's changed the width of the menu? You offer adding icons to the menus, it's in your documentation, so don't suggest that it's my fault, I'm just using features of your theme.

Steve_Dillon · August 2018

The default width of the "Side Slide" menu is 250px - which is what it's been since I reported this problem. I haven't added any CSS to make it wider.

Next time maybe consider looking at the Theme Options or CSS before recommending I break my site for no reason.

Pablo · August 2018

So, Is anything we can help you with now?

Cheers

2nd Level Sub-menu Not Showing on Mobile

Comments