CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
AdamXpelled
AdamXpelled

Reputation: 27

Responsive dropdown menu is reloading my page

If anyone is reading this, please help. I have a responsive menu I created with a tutorial, it uses css and just a code in javascript (which I don't know nothing, I just copy/paste), and it works fine. The problem starts when I insert this menu inside a div in my site. The desktop version works still fine, but the mobile version is a different story. The button calls the dropdown menu, but when I press the projects button it reloads the page and never shows me the projects.

For better understanding, I uploaded two sites, please check them on your phone if possible:

Now you can see the menu in the second link is inside a div called 'header-menu' which is inside another div called 'header', and that is how it's supposed to be in my page. What is wrong and how can I solve this??

Thank you.

Upvotes: 0

Views: 1731

Answers (1)

TheOnlyError
TheOnlyError

Reputation: 1451

Your portfolio has an empty href attribute, change this to #.

Under the li item with the class submenu change

<a href=""> to <a href="#">.

A bit of javascript can solve your next problem. You detect if the user is using a mobile device, if so, you set the href attribute to #. Otherwise you remove the href attribute. Give the portfolio link an id to make things easier.

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    document.getElementById("YOUR ID").href = "#";
}
else {
    document.getElementById("YOUR ID").removeAttribute("href");
}

This should solve all of your problems.

Upvotes: 3

Related Questions