Mobile Menu button takes top of the page

Question

I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.

My website is: www.autoberles-szombathely.hu

So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.

The issue could be the `href="#"` on the link of the menu. To prevent this you can add an event handler to that link and do `event.prevetnDefault()` — empiric, Sep 09 '16 at 18:09
@empiric i'm on safari and it alway takes me to the top of the page — Tibor Ambrus, Sep 09 '16 at 18:09
@empiric is right, through he made a typo. It's event.preventDefault(). Though you could also remove the href entirely of course. — Tom, Sep 09 '16 at 18:14
@empiric thanks that was the problem if you make it an answer i will accept it:) — Tibor Ambrus, Sep 09 '16 at 18:21

score 0 · Accepted Answer · answered Sep 09 '16 at 18:29

you can use:

$(selector).click(function(event) {
    event.preventDefault();
    //other stuff you might want to do on event
});

For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.

score 0 · Answer 2 · edited May 23 '17 at 12:14

Your menu has the following structure in a mobile viewport:

<a href="#" class="menu-toggle btn ripple-effect btn-theme-transparent"><i class="fa fa-bars"></i></a>

The # will cause the page to jump to the top, see here for a detailed answer why.

You have two possibilies to prevent this behavoir:

Add an event handler to this link and use event.preventDefault()

For jQuery

$('.menu-toggle').on('click', function(event){ 
     event.preventDefault();
});

VanillaJs

document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
    event.preventDefault()
});

Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.

Mobile Menu button takes top of the page

2 Answers2