Mobile layout and mobile menu

[foxycleop]

Hi there: I want to point out that the mobile layout (especially header) is a bit messed up and the mobile menu is missing in WPLMS 2.0x versions. Could you kindly check?

[H.K. Latiyan]

Please share the site url.

[foxycleop]

Dear Latiyan Here is the website with old version of WPLMS http://treptalks.com Here is the staging area with new version of WPLMS: https://treptalktest.wpengine.com/ Kindly compare the mobile versions of both these websites and especially notice the header area. The mobile menus are the same in both. As of now, I haven't found a compelling reason to update the website to the newer version of WPLMS due to bugs etc, hopefully that would change in the near future. (if possible also notice the design of the course blocks in both websites - why is it that the new version of WPLMS has "poor design quality" of course blocks? - I would have expected it to improve if anything? But it went the other way.)  

[chrisbecream]

Hello, I am having same issue on my site. Mobile site is blank white page with only signup/login link showing. However, can not login or signup.....why always issues with this script, drives me crazy. how to fix

[H.K. Latiyan]

@foxycleop: The site url you gave me needs authorization to proceed. So also share the username and password to proceed, refer: http://prntscr.com/9ydbwc. @chrisbecream: Its recommended to create you own topic for better understanding. I will also need your site url to check, as I am not getting this issue on my test site.

[foxycleop]

Oh yes, it is to stop bots from crawling the staging site: https://treptalktest.wpengine.com Username: treptalktest Pass: 123456

[H.K. Latiyan]

@foxycleop: The mobile menu is present but its not visible because the menu color is white and same is that of the background. Please use this custom css to change the menu color:

header #trigger .lines,header #trigger .lines:before,header #trigger .lines:after {
background:#000;
}

By default the top menu is not visible in the mobile, as the mobile screen is small and the menu is big, so it does not look nice in mobile. But if you want your top menu to be displayed in the mobile view, then please use this custom css:

@media (max-width: 767px){
#headertop .topmenu+.topmenu {
display: inline-block !important;
}
}

[foxycleop]

Thanks @Latiyan for the code. However, it doesn't fix the layout issue. Kindly take a look at this short video I have created, perhaps this would be a bit clearer. http://quick.as/yvx2fpqew @MrVibe I would appreciate if you could take a look at this issue as well. Thank you!

[foxycleop]

PLease see the attached images for before and after screenshot of mobile layout and differences.

[Anshuman Sahu]

Yes this is an issue with the header and mobile menu with the modern theme  and default theme . We are fixing these issues with the headers in the upcoming updates of wplms . To quick fix this please add the given css from wp-admin -> appearanc e-> custom css : #trigger .lines, #trigger .lines:after, #trigger .lines:before {     background: #3A3434; } @media (max-width: 767px){ header #trigger {     display: block;     top: 25px; } } @media (max-width: 767px){ header #searchicon {     float: right;     padding-right: 5px;     padding-left: 10px; } div#searchicon {     position: absolute;     top: 0px;     right: 45px; }   }

[foxycleop]

Thank you will try this out. When youa re fixing the Mobile Layout in the next update, please also check the "Course Curriculum" as well, it goes out of frame in Mobile. (I am using Blank Chilld Theme) Thanks!

[Author]

Posts