Disable parent nav links on mobile devices
I have a menu in WordPress, where the parent menu item links to a landing page. I'd like it so on mobile devices only this link is disabled. Currently, when clicking on mobile devices the parent items both link to another page AND show dropdown menus, so it's a race...
I tried using media queries and pointer-events: none but it didn't seem to do anything when tested on my phone. And of course, the submenu links have to continue to work.
Thank you!
<div class="mobile-nav"><i class="glyphicon glyphicon-menu-hamburger"></i></div>
<nav id="nav" role="navigation">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-733"><a href="#">Company</a>
<ul class="sub-menu">
<li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="#">Press/News</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="#">Newsletter</a></li>
<li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="#">Company History</a></li>
</ul>
</li>
</ul>
</nav>
wordpress drop-down-menu navigation
asked Nov 14 '18 at 0:47
annaanna
233
add a comment |
I have a menu in WordPress, where the parent menu item links to a landing page. I'd like it so on mobile devices only this link is disabled. Currently, when clicking on mobile devices the parent items both link to another page AND show dropdown menus, so it's a race...
I tried using media queries and pointer-events: none but it didn't seem to do anything when tested on my phone. And of course, the submenu links have to continue to work.
Thank you!
<div class="mobile-nav"><i class="glyphicon glyphicon-menu-hamburger"></i></div>
<nav id="nav" role="navigation">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-733"><a href="#">Company</a>
<ul class="sub-menu">
<li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="#">Press/News</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="#">Newsletter</a></li>
<li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="#">Company History</a></li>
</ul>
</li>
</ul>
</nav>
wordpress drop-down-menu navigation
asked Nov 14 '18 at 0:47
annaanna
233
add a comment |
I have a menu in WordPress, where the parent menu item links to a landing page. I'd like it so on mobile devices only this link is disabled. Currently, when clicking on mobile devices the parent items both link to another page AND show dropdown menus, so it's a race...
I tried using media queries and pointer-events: none but it didn't seem to do anything when tested on my phone. And of course, the submenu links have to continue to work.
Thank you!
<div class="mobile-nav"><i class="glyphicon glyphicon-menu-hamburger"></i></div>
<nav id="nav" role="navigation">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-733"><a href="#">Company</a>
<ul class="sub-menu">
<li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="#">Press/News</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="#">Newsletter</a></li>
<li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="#">Company History</a></li>
</ul>
</li>
</ul>
</nav>
wordpress drop-down-menu navigation
asked Nov 14 '18 at 0:47
annaanna
233
I have a menu in WordPress, where the parent menu item links to a landing page. I'd like it so on mobile devices only this link is disabled. Currently, when clicking on mobile devices the parent items both link to another page AND show dropdown menus, so it's a race...
I tried using media queries and pointer-events: none but it didn't seem to do anything when tested on my phone. And of course, the submenu links have to continue to work.
Thank you!
<div class="mobile-nav"><i class="glyphicon glyphicon-menu-hamburger"></i></div>
<nav id="nav" role="navigation">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-733"><a href="#">Company</a>
<ul class="sub-menu">
<li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="#">Press/News</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="#">Newsletter</a></li>
<li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="#">Company History</a></li>
</ul>
</li>
</ul>
</nav>
wordpress drop-down-menu navigation
wordpress drop-down-menu navigation
asked Nov 14 '18 at 0:47
annaanna
233
asked Nov 14 '18 at 0:47
annaanna
233
asked Nov 14 '18 at 0:47
annaanna
233
asked Nov 14 '18 at 0:47
annaanna
233
asked Nov 14 '18 at 0:47
annaanna
233
233
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Since you are using WP, and jQuery is included, why not try that? Change the 1023 to whatever your breakpoint is for mobile.
(function($)({
$(function(){
if($(window).width() < 1023){
$('.menu-item-has-children').click(function(e){
e.preventDefault();
});
}
});
})(jQuery);
answered Nov 14 '18 at 0:53
EricEric
1866
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291602%2fdisable-parent-nav-links-on-mobile-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Since you are using WP, and jQuery is included, why not try that? Change the 1023 to whatever your breakpoint is for mobile.
(function($)({
$(function(){
if($(window).width() < 1023){
$('.menu-item-has-children').click(function(e){
e.preventDefault();
});
}
});
})(jQuery);
answered Nov 14 '18 at 0:53
EricEric
1866
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
add a comment |
Since you are using WP, and jQuery is included, why not try that? Change the 1023 to whatever your breakpoint is for mobile.
(function($)({
$(function(){
if($(window).width() < 1023){
$('.menu-item-has-children').click(function(e){
e.preventDefault();
});
}
});
})(jQuery);
answered Nov 14 '18 at 0:53
EricEric
1866
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
add a comment |
Since you are using WP, and jQuery is included, why not try that? Change the 1023 to whatever your breakpoint is for mobile.
(function($)({
$(function(){
if($(window).width() < 1023){
$('.menu-item-has-children').click(function(e){
e.preventDefault();
});
}
});
})(jQuery);
answered Nov 14 '18 at 0:53
EricEric
1866
Since you are using WP, and jQuery is included, why not try that? Change the 1023 to whatever your breakpoint is for mobile.
(function($)({
$(function(){
if($(window).width() < 1023){
$('.menu-item-has-children').click(function(e){
e.preventDefault();
});
}
});
})(jQuery);
answered Nov 14 '18 at 0:53
EricEric
1866
answered Nov 14 '18 at 0:53
EricEric
1866
answered Nov 14 '18 at 0:53
EricEric
1866
answered Nov 14 '18 at 0:53
EricEric
1866
1866
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
add a comment |
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Hmm, when I try that clicking the hamburger to show the menu on mobile devices no longer works. Any idea why?
– anna
Nov 14 '18 at 3:29
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Do you have any console errors?
– Eric
Nov 14 '18 at 12:17
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
Got it working! Thanks!
– anna
Nov 14 '18 at 15:08
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291602%2fdisable-parent-nav-links-on-mobile-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
