[Solved] Help! Problem with Bootstrap responsive menu

[Cliveo]

I am working on an Orchard project using a bootstrap theme and there is a problem with sub-menus when the site is viewed at mobile size. The main navigation menus push everything else down so that’s fine but when you open a sub-menu, it just appears over the top of the “open account” section instead of pushing it all down.

Take a look here and you will see what I mean http://devjag.lqdmarkets.com:888/

Set browser to mobile width (around 360px) and open the menu, all works fine but when you click on the “Trading Products” menu item to open the sub-menu, the menu just appear over the top of the items below it.

I went through making various changes in the Chrome development tools but can’t seem to find the problem. I can usually find the issue on this kind of thing but I have to say, this one has me stumped…I know why this area is called “CSS combat” now, I feel I have been slugging it out with this problem so any help/advice would be greatly appreciated.

[Paulie_D]

On desktop Chrome you already have issues as there is always a horizontal scrollbar.

Set browser to mobile width (around 360px) and open the menu, all works fine but when you click on the “Trading Products” menu item to open the sub-menu, the menu just appear over the top of the items below it.

That’s the way it’s supposed to work isn’t it.?

On Mobile you would tap/click to close the submenu before opening another main menu item.

[Cliveo]

Hi Paulie,

I was actually using the Responsive site view plugin for Chrome that sticks your site in a mobile size simulator so I didn’t see any horizontal scrollbars.

Yes on mobile you would tap/click to open another menu item but the problem comes on opening the first menu to reveal the sub-menu items

I fear I haven’t explained it very well so I did a quick diagram and stuck it on tinypic http://oi59.tinypic.com/260cpkp.jpg
This should explain the issue a little clearer. On the diagram, the sub-menu items are “Forex Trading, Metals Trading, CFD Trading and Spreads”. When these are revealed, the menu overlays the “open account” buttons instead of pushing this section further down. If you were to open one of the other menu items then obviously this first one should close (I didn’t test that yet).

[Cliveo]

I tried this, I did a search through the entire bootstrap css and only found 1 “position:absolute” on that class (line:2471) but changing it to relative didn’t change anything?

I also added the relative attribute to the mobile media queries but still nothing? Does anyone have any other suggestions?

[Cliveo]

That fixed it! Nice one thanks very much Krish1980

[supeermaryo]

i have almost same problem on my web site: http://www.kartap.org
submenu open fine but when you click item it doesn’t work on mobile version:/

[Author]

Posts