How To Change The Left Menu Position On The Mobile Version - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

How To Change The Left Menu Position On The Mobile Version

Josep

Josep

Template 3 years ago

Hi,

I have a question. I have a long left menu on my Educon webpage with a left menu. But when I access to my website with a mobile phone, the left menu occupies a top position, and I would like to position the left menu under the content (as it was a right menu, but being a left menu on the complet version and being under the content on the responsive mobile version).

I attach two screenshots:

https://ibb.co/8mgCdY6 https://ibb.co/9Z3K99x

Thank you very much

Josep Mencion Seguranyes

0
15 Answers
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #56243

You can check bootstrap classes. Or you need to add custom css code inside the custom.css file.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #49361

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Will you please provide me the Joomla administrator access to check the issue? I will check & get back to you soon. 

-Thanks

0
Josep
Josep
Accepted Answer
3 years ago #49387

Hi,

Sure, I attach you the data on the hidden content box.

Thank you very much

Josep Mencion Seguranyes

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #49440

Check now and let me know. Thanks

0
Josep
Josep
Accepted Answer
3 years ago #49446

Hi,

Thank you very much for your changes. I think that the site load time is faster, which was the problem?

But when I browse through the website on a mobile, I still see the left menu above the content position instead of under the content. As the left menu is too long, I would like to position it under the content.

Thank you very much

Josep Mencion Seguranyes

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #49473

Will you tell me the screen size? I will write a media query css for you.

0
Josep
Josep
Accepted Answer
3 years ago #49492

Thank you very much.

I don't understand what do you mean about which is the screen size because the website should be respnsive and should adapt itself to all sizes of screen?

My idea is to show the left menu where the right menu is showed on the mobile app (under the content and not above). But keep viewing the menu in the left position in computer responsive mode.

The thing is that the mobile version should be modified in order the show the left position under the content page and not above, as it works now.

Thank you very much

Josep Mencion Seguranyes

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #49665

Please check again. Thanks

0
Josep
Josep
Accepted Answer
3 years ago #49691

Good morning,

Thank you very much for your changes, but I have just checked it right now and I still see the left menu above the content with my mobile phone, and I also tried it with the incognito mode in order to erase all the cookies. Probably I should erase the Joomla! chaché? Or probably there's another problem?

Thank you very much,

Josep Mencion Seguranyes

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #49707

Screenshot_2021-12-30-15-25-20-673_com.android.chrome.jpg

0
Josep
Josep
Accepted Answer
3 years ago #49720

Hi,

The left menu appears on all the pages but not on the home page. If I browse another page different from the gomepage the left menu appears above the content. This is what I mean (Screenshot link here: https://ibb.co/SNfB7BS).

Thank you very much,

Josep Mencion Seguranyes

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #49807

Please check now and let me know. Thanks

0
Josep
Josep
Accepted Answer
3 years ago #55963

Sorry because as I didn't found the solution to the problem I have had a delay answering to your message. Thanks for your help.

What I want is to show the menu on the left position on tablets and desktops and on the right position on mobiles (in order to show it under the component position in mobiles). And I think that I have found the option to configure this on the "Layout" option on your template settings page.

But I need your help because something is not working. I have configured the left position with "Hide on Mobile" and the right position with "Hide on Desktop" and "Hide on Tablets". And the configuration is not working because, as I created two different modules for left and right positions, the two menus are being showed on the two positions, even if I browse my website with a mobile or a tablet or a desktop computer.

Could you help me?

I attatch some pictures. (As I have different templates for different languages because I cloned the template in order to create a multilingual website, the principal template in spanish language is: SP-Plantilla La Sureda Cork).

Screenshots here: https://ibb.co/2WvQG5Y https://ibb.co/Cs81qZj https://ibb.co/sv1GKfd

Thank you very much,

Josep Mencion Seguranyes

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #56236

Can you share a screenshot that you want to do exactly?

0
Josep
Josep
Accepted Answer
3 years ago #56239

Hi another time,

Thank you very much for your help. I have solved my issue using the CSS class " hidden-xs" on the left menu module. Then it is not shown on the mobile version. And in order to have the menu on mobile version, I have used the position offcanvias.

It would be grateful to know which are the classes which can be used in order to hide elements on desktop and mobile versions.

Thank you very much!

Josep

0