Mobile Menu in footer(?) and stops expanding after certain size.

[Historical Forums User]

Hi!

I need some help with getting my darn mobile menu to work (I have been at this the whole day!)

Please take a look at http://beta.koopkarre.co.za.

1) The mobile menu sits in the footer and I do not know how to take it to the top.
2) The mobile menu works beautifully even though it sits in the footer. The problem comes when I start to expand the viewport to anything over 400px. The menu then defaults to expanded and can’t be collapsed or expanded anymore.

Any help would be amazing. Thank you!

[Senff]

The mobile menu (nav) is at the bottom of the page because in the markup, it’s coming after the main content (page-wrapper). If you want it to be at the top of the page, you’re going to have to move it up in the HTML markup.

(Or set it to position:absolute with a top/left of 0/0, but then it will obscure other things in the page and it’s a bit of a quick/dirty fix.)

Wonder why you need another menu though, there already is one at the top called “Webtuiste Navigasie”?

Not seeing the second issue you’re having.

[Historical Forums User]

Hi Senff

Thanks for a lot for the response.

I actually want the mobile menu to replace “Webtuiste Navigasie” because it offer advanced search options in the menu.

The code is generated by a wordpress theme script so I can’t change the markup. I tried the quick fix but it didn’t respond.

Any other ideas?

Thanks again, it is much appreciated.

[Senff]

If you can’t change the markup in any way, you’re going to have to use position:absolute; on the menu, and then position it as desired. Something like this:

 #core_mobile_menu {
    position:absolute;
    left:0;
    top:112px;
}

It’s just a start.

[Author]

Posts