I have developed one magento website.

In this, Menu is not coming properly in resonsive. If we click on the menu icon, that is coming simply at the top of homepage banner.

When i click on menu icon, i am getting menu like, enter image description here

But, I want like,

enter image description here

  • Am I immature for laughing at the question/title? – Ben Crook Mar 1 '17 at 10:45
  • @BenCrook, Why? What happend? – Teja Bhagavan Kollepara Mar 1 '17 at 10:47
  • It's a bit hard to explain, all I'll say is it means something rude in some areas of the UK/US ;) – Ben Crook Mar 1 '17 at 10:47
  • @BenCrook, ok it means something rude in some areas of the UK/US. But, who are facing the issue, that person only know that struggle – Teja Bhagavan Kollepara Mar 1 '17 at 10:49

Mobile menu checking.

To check if your mobile menu is working it is best to use a browser with developer tools.

For example Google Chrome has a developer tool with mobile views.

Open your website in Google Chrome and activate Mobile view by going into the developer console by pressing F12.

Google Chrome Developer

Now click the mobile view. I encircled it in red then you will see:

Depoto site in Developer mobile view

As you can see the site loads your mobile menu for the links above at 641 width.

And I checked it at 640 below width and the mobile menu works.

So the solution would be to look for the code that makes it work only at 640 below and increase it to what you would like.

Mobile menu view

According to the poster of the question that is not what he meant when he asked the question. So here is a solution for the edited question which requires:

  1. The mobile menu will show as the left column of the page when clicked.
  2. The content will shift to the right of the mobile menu when clicked.

The thing to note is that when the mobile menu is shown a class is added to the body "mobile-nav-shown". We can use that to our advantage.

Create a CSS modification @media screen and (max-width: 991px) {} and add these:

@media screen and (max-width: 991px) {

.mobile-nav-shown .page{width: 150%; overflow: hidden;}
.mobile-nav-shown .mobile-nav.side-block.container 
width: 170px;
float: left; 
margin: 0 auto; 
border: none; 
height: 500px; 
background-color: black; 
max-width: 49%;}

.mobile-nav-shown .top-container{float: left; overflow: visible; width: 50%}
.mobile-nav-shown .main-container{float: left; overflow: visible; width: 50%}
.mobile-nav-shown .main.container{min-width: 840px}
.mobile-nav-shown .header-container{clear: both;}
.mobile-nav-shown .footer-container{clear: both;}

Edit the other things you want to change in the CSS.

View at 991 width:

991 width

View at 768 width:

768 width

At the lower widths you might need to add CSS to work with the .main.container @media screen and (max-width: VALUE) {} .mobile-nav-shown .main.container { min-width: lower this to the max width VALUE of the page; }

View at 320 width:

320 width

That's all I can help you with for now.

| improve this answer | |
  • Thanks for responce.please click on menu icon then you can understand. – Teja Bhagavan Kollepara Feb 28 '17 at 8:50
  • Can you paste a picture of what you mean is going wrong with the menu? – fja3omega Feb 28 '17 at 8:58
  • check once i updated question plz – Teja Bhagavan Kollepara Feb 28 '17 at 9:03
  • That's unconventional. Most mobile menu's are supposed to go into a smaller link where it will not show the content unless clicked. But since you want a menu that is a sidebar even in a smaller menu I would suggest editing the template files to accommodate that change. Since it is a method requiring changes in CSS I will add an edit to my answer on one way to do that. – fja3omega Mar 1 '17 at 0:26
  • Hello fja3omega, Its worked for me, Thank you. I added your css. – Teja Bhagavan Kollepara Mar 1 '17 at 10:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.