Edit Profile Page Broken Mobile Menu

kcdadmin

@saguaros I apologize but I made a huge mistake. Please take a look at this at this post. You had given me the CSS for the height but I forgot that before I submitted the last reply on that post I had been trying to fix the menu and left a piece of CSS that hid the mobile menu.

This is the fix I added:

.t4-offcanvas.oc-effect-1 {
    display: none !important;
}

@media only screen and (max-width: 992px) {
    .t4-offcanvas.oc-effect-1 {
        display: block !important;
    }
}

That hides the mobile menu on the desktop and enables it when the site is on a mobile device. The issue is that now, this is what I see on the Edit Profile page:

As you can see, the mobile menu is positioned to the right of the body and you can slide to it. This is how it looks with my fix but I have since removed so that you may do a proper fix. The code you had entered made it so that the menu shows below the red bars but it does not slide down because the mobile menu is displayed already expanded. Those red bars on the menu should not be there as it should match the styling of the other pages beginning with About Us and so on. The Homepage has a different version of that menu. If making changes to that means having to make changes to the rest of the menu I rather leave them there and I will change the color as an easier solution.

I apologize for the inconvenience as I believed I had removed all of my CSS for this portion.

saguaros

Hi kcdadmin

So how you want it should be now?

I tried to login to take a look but the provided login info seems not working now, pls update again.

kcdadmin

saguaros It should look as all the other pages look when it is on mobile. The Edit Profile page is currently disabled but please enable it when you take a look at it. It is under Main Menu > Account. The Mobile Menu that displays on all the other pages slides in from the right but it is broken on the Edit Profile page.

The mobile menu also displays on the desktop version when you load a page and immediately press the Tab key. To make this easier, you can try it on the homepage and you'll see that the mobile menu displays on the right and then you can't remove it unless you reload the website.

I have updated the credentials. Thank you.

saguaros

kcdadmin I see the issue, let me check and will get back to you.

saguaros

Updated:

I updated this file: /plugins/system/t4/src/t4/Document/Edit.php

editphp.zip

906B

and in 'custom.css':

@media (min-width: 992px){
.t4-edit-layout .t4-header .t4-megamenu.collapse {
    height: auto;
}
}

It should be ok now.

kcdadmin

saguaros

Thank you for looking at this issue. Unfortunately, I am still seeing this

The red bars still show up. The mobile menu is working properly on mobile devices but you can still see it on the desktop version when you scroll to the right on the Edit Profile page.

Going to the homepage and pressing the Tab key also brings up the mobile version on the homepage as you can see below.

Sorry this has become such a pain.

saguaros

kcdadmin

I'm not aware that I need to scroll to the right to see that bar, kindly check it now.

kcdadmin

saguaros Alright, the menu is not displaying on the Edit Profile page. It is still coming up on the homepage and other pages when you use the Tab key to scroll through the pages.

The mobile menu on the Edit Profile page is not coming up on mobile either :/

saguaros

kcdadmin Could you clear your web browser's cache?

I check on homepage and other page but don't see that off-canvas menu shows now.

And on mobile, the off-canvas displays normally:

kcdadmin

saguaros I cleared my cache but I still see the menu when I press the Tab key on my keyboard. If you can, hold down the Tab key until it cycles to the bottom and you'll see the mobile menu launch from the right side.

The mobile menu is working on all pages except the Edit Profile page. When you go to the Edit Profile page and try to click on the menu, on the top right, the button just lights up but the menu does not slide in like it does on other pages.

kcdadmin

I am also noticing that the dropdown menus do not show when you hover over them in the Edit Profile page :/

saguaros

Hi kcdadmin

I often work with Safari so I did not see the issue.

I just tested with Firefox and can see it, let me check and will get back to you.

saguaros

Updated:

We fixed the issue of dropdown issue with this custom css rule:

/* Joomlart fix dropdown in Edit Profile Page */
#t4-megamenu-mainmenu {
    overflow: visible;
}

.t4-edit-layout div#t4-header {
  padding-top: 0;
  padding-bottom: 0;
}

About the Tab key, it relates to the Accessibility standard in browser, we can fix it (not to show the off-canvas when using Tab key) but it will affect the animation of off-canvas settings, if you don't use animation for off-canvas, we will update it, pls let me know.

kcdadmin

saguaros I apologize I should have mentioned which browser I was working with. Let's leave the Tab key portion alone as that is minor compare to the rest and I don't want to change the animation.

I took a look at the Edit Profile page and it looks perfect on desktop using Chrome and Firefox. When I switch to the mobile view of the Edit Profile page I see this

It looks like the menu is trying to slide down from the middle and the menu button on the top right does not work. That should work just like it does on every other page. Looking through it I feel that it is the only remaining issue. Don't worry about the Tab key.

I appreciate everything you have done and this is the reason why I will continue to always work with Joomlart.

saguaros

kcdadmin

Somehow the off-canvas was disabled in the edit layout, I enabled it again, could you check again?

kcdadmin

saguaros Thank you so much for your help! Everything looks good and I fixed the mobile menu displaying on the desktop version with my own CSS. Sorry for the delay but thank you again for everything that you did. My client will be extremely happy.

saguaros

kcdadmin Glad to be of help!

Have a good day!!!