Push the page down when expanding @max-width: 640px

[joris]

This is probably a pretty simple question, but I can’t seem to get it to work!
When a menu expands on small screen devices (or browser with a max width of 640px) I would like the submenu to push the page down and not display the submenu as a layer over the content.
I’ve tried the Tutorial section but I couldn’t figger it out!

Thanks! Joris

[admin]

Can you post an example where it doesn’t work like that?

Because on the default demo page when the viewport width is less than 640px the sub menus become collapsible and push everything down instead of being displayed as a layer on top of the content.

[joris]

I run a test on http://yy.12see.net

[joris]

You were right … the problem wasn’t in the Smartmenu. Thanks for the trouble.

(Great product by the way!)

[admin]

OK, np! Cheers!

[AliE]

Hi,

I was reading the above post in relation to a problem I am having with the menu display on less than 640px. The problem I have is similar but not the same. I have a “menu toggle button” set up and working, I am also using the “simple” menu. On full display the menu works great and sub-menus sit on top of content as normal when expanded. On 640 and less, my “menu toggle” works but when I click to expand the menu, the menu sits UNDER my html. Subsequently, sub-menus also have the same effect, there seems to be no push on the content after my menu and sub-menus expand.

admin …. please can you help with any suggestions.

[admin]

Hi, yep, I will gladly take a look and try to investigate the issue. I suppose you have some additional CSS rules on the page that affect the sub menus in collapsible mode. However, it’s very difficult to guess what exactly it might be without looking at your code, so please post a link to a live URL I could test.

Thanks!

[AliE]

Thanks for the reply. Unfortunately my website is not live yet and is only “LOCAL”, I would obviously like it fixed before it goes live BUT I do understand that it’s hard/impossible for you to GUESS the problem. I will post a link as soon as I can. If in the meantime you would have any suggestions for possible areas I should be looking at then please say 😉 Thanks again.

[admin]

As I mentioned, most probably some of your CSS rules affect the sub menus in collapsible mode. It’s easiest to find out which ones by using some browser’s dev tools (e.g. Chrome’s built-in, Firefox’s built-in or Firebug, etc.). Alternatively, you may try disabling/enabling your page CSS until you figure out which ones..

[AliE]

Hi, again. I checked the CSS rules. I DID find the problem, I bypassed the CSS rule and the “under 640” menu works as it should by pushing the page content down. So I am very happy about that 😉 I was wondering if you would be able to help me understand WHY the problem occurred. As stated before, I have styled a menu toggle button and the simple menu, all worked fine on large display but on small displays the menu did not push page content. The problem CSS was with the style I applied to the menu toggle “div”. All I was trying to achieve was, a colour background to the toggle button and a positioning effect. I have pasted the problem CSS below. As I said before, I am happy enough with the new effect and even the lack of colour for my toggle button SO I’m not pushing a problem, but it would be nice to understand why it happened so that I may look at a colour background again for my current website or in future projects.

#menubt {
height: 30px;
width: 800px;
margin-top: 40px;
background-color: rgba(255,244,255,1);
}

Many thanks again admin for your very quick responses to posts and for your great advice, and again thanks for a good menu !!!!

[admin]

Unfortunately, I am not able to reproduce the issue by just applying those styles on a menu toggle button (added on the page as described in the docs). I guess this might trigger the issue if it’s combined with something else specific for your layout but, again, it’s very difficult to guess what it might be without testing a live demo.

Cheers!

[Author]

Posts