Menu appearing on mobile view in desktop browsers but not on actual mobiles
0
I'm working on a site using wordpress. I'm making a custom menu. When you activate mobile view in inspect element it works fine, but from an actual phone the menu seems to be transparent (it opens but you don't notice, press top right to activate the invisible close button). I've tried adding the z-index. It is position fixed, but still nothing is working.
jQuery(document).ready(function( $ ){
var $ = jQuery;
$(".mobile_menu_button").click(function(e){
$(".mobile_menu li").css("margin-top","20px");
$(".mobile_menu").fadeIn();
$(".mobile_menu li").animate({marginTop: "0"}, 500);
e.preventDefault();
$(".mobile_menu ul").fadeIn();
});
$(".mobile_menu i").click(function(e){
closeMenu();
});
});
function closeMenu()
{
var $ = jQuery;
$(".mobile_menu li").animate({marginTop: "20px"}, 500);
$(".mobile_menu").fadeOut();
}
And Here is the CSS:
.mobile_menu ul{
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding-top: 6% !important;
background: white !important;
}
And Here is a the wordpress html/php code :
echo '<ul>';
echo '<li class = "close"> <i class = "fa fa-times" onclick = "closeMenu()"></i> </li>';
wp_nav_menu( array( 'theme_location' => 'left-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
wp_nav_menu( array( 'theme_location' => 'right-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
echo '</ul>';
Here is the link if you wish to test: https://cloudypro.net/demo/nfbynour/
javascript jquery html css wordpress
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
asked Nov 14 '18 at 11:22
AymanHAymanH
32
add a comment |
0
I'm working on a site using wordpress. I'm making a custom menu. When you activate mobile view in inspect element it works fine, but from an actual phone the menu seems to be transparent (it opens but you don't notice, press top right to activate the invisible close button). I've tried adding the z-index. It is position fixed, but still nothing is working.
jQuery(document).ready(function( $ ){
var $ = jQuery;
$(".mobile_menu_button").click(function(e){
$(".mobile_menu li").css("margin-top","20px");
$(".mobile_menu").fadeIn();
$(".mobile_menu li").animate({marginTop: "0"}, 500);
e.preventDefault();
$(".mobile_menu ul").fadeIn();
});
$(".mobile_menu i").click(function(e){
closeMenu();
});
});
function closeMenu()
{
var $ = jQuery;
$(".mobile_menu li").animate({marginTop: "20px"}, 500);
$(".mobile_menu").fadeOut();
}
And Here is the CSS:
.mobile_menu ul{
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding-top: 6% !important;
background: white !important;
}
And Here is a the wordpress html/php code :
echo '<ul>';
echo '<li class = "close"> <i class = "fa fa-times" onclick = "closeMenu()"></i> </li>';
wp_nav_menu( array( 'theme_location' => 'left-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
wp_nav_menu( array( 'theme_location' => 'right-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
echo '</ul>';
Here is the link if you wish to test: https://cloudypro.net/demo/nfbynour/
javascript jquery html css wordpress
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
asked Nov 14 '18 at 11:22
AymanHAymanH
32
“it is position fixed” - looks like it isn’t, when I debug this (using BrowserStack), theulelement actually hasposition:relative, coming from a rule with the selectornav.mobile_menu, nav.mobile_menu ul(fromstylesheet.min.cssout of thestockholmtheme folder.) For some reason the!importantform your own stylesheet rule doesn’t seem to work, the first rule overwrites this. Try using a selector with the same specificity for your rule (nav.mobile_menu ul) and see if that changes things.
– misorude
Nov 14 '18 at 11:37
@misorude Thank you but it did not seem to work - problem is i cant debug on phone and pc browsers are working. I want to avoid using a paid solution like subscribing to browser stack. Can you please re check if its still being given relative ?
– AymanH
Nov 14 '18 at 11:47
Nah, sorry, can’t keep checking on the issue for you repeatedly. BrowserStack offers a free trial, it limits the time you can test to five minutes or something like that. Alternatively, hook your phone up to your computer via USB, then you can remote-debug.
– misorude
Nov 14 '18 at 12:07
add a comment |
0
0
0
I'm working on a site using wordpress. I'm making a custom menu. When you activate mobile view in inspect element it works fine, but from an actual phone the menu seems to be transparent (it opens but you don't notice, press top right to activate the invisible close button). I've tried adding the z-index. It is position fixed, but still nothing is working.
jQuery(document).ready(function( $ ){
var $ = jQuery;
$(".mobile_menu_button").click(function(e){
$(".mobile_menu li").css("margin-top","20px");
$(".mobile_menu").fadeIn();
$(".mobile_menu li").animate({marginTop: "0"}, 500);
e.preventDefault();
$(".mobile_menu ul").fadeIn();
});
$(".mobile_menu i").click(function(e){
closeMenu();
});
});
function closeMenu()
{
var $ = jQuery;
$(".mobile_menu li").animate({marginTop: "20px"}, 500);
$(".mobile_menu").fadeOut();
}
And Here is the CSS:
.mobile_menu ul{
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding-top: 6% !important;
background: white !important;
}
And Here is a the wordpress html/php code :
echo '<ul>';
echo '<li class = "close"> <i class = "fa fa-times" onclick = "closeMenu()"></i> </li>';
wp_nav_menu( array( 'theme_location' => 'left-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
wp_nav_menu( array( 'theme_location' => 'right-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
echo '</ul>';
Here is the link if you wish to test: https://cloudypro.net/demo/nfbynour/
javascript jquery html css wordpress
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
asked Nov 14 '18 at 11:22
AymanHAymanH
32
I'm working on a site using wordpress. I'm making a custom menu. When you activate mobile view in inspect element it works fine, but from an actual phone the menu seems to be transparent (it opens but you don't notice, press top right to activate the invisible close button). I've tried adding the z-index. It is position fixed, but still nothing is working.
jQuery(document).ready(function( $ ){
var $ = jQuery;
$(".mobile_menu_button").click(function(e){
$(".mobile_menu li").css("margin-top","20px");
$(".mobile_menu").fadeIn();
$(".mobile_menu li").animate({marginTop: "0"}, 500);
e.preventDefault();
$(".mobile_menu ul").fadeIn();
});
$(".mobile_menu i").click(function(e){
closeMenu();
});
});
function closeMenu()
{
var $ = jQuery;
$(".mobile_menu li").animate({marginTop: "20px"}, 500);
$(".mobile_menu").fadeOut();
}
And Here is the CSS:
.mobile_menu ul{
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding-top: 6% !important;
background: white !important;
}
And Here is a the wordpress html/php code :
echo '<ul>';
echo '<li class = "close"> <i class = "fa fa-times" onclick = "closeMenu()"></i> </li>';
wp_nav_menu( array( 'theme_location' => 'left-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
wp_nav_menu( array( 'theme_location' => 'right-top-navigation' ,
'container' => '',
'container_class' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'walker' => new qode_type4_walker_nav_menu(),
'items_wrap' => '%3$s'
));
echo '</ul>';
Here is the link if you wish to test: https://cloudypro.net/demo/nfbynour/
javascript jquery html css wordpress
javascript jquery html css wordpress
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
asked Nov 14 '18 at 11:22
AymanHAymanH
32
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
asked Nov 14 '18 at 11:22
AymanHAymanH
32
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
edited Nov 14 '18 at 11:34
Patrick Schocke
969216
969216
asked Nov 14 '18 at 11:22
AymanHAymanH
32
asked Nov 14 '18 at 11:22
AymanHAymanH
32
asked Nov 14 '18 at 11:22
AymanHAymanH
32
32
“it is position fixed” - looks like it isn’t, when I debug this (using BrowserStack), theulelement actually hasposition:relative, coming from a rule with the selectornav.mobile_menu, nav.mobile_menu ul(fromstylesheet.min.cssout of thestockholmtheme folder.) For some reason the!importantform your own stylesheet rule doesn’t seem to work, the first rule overwrites this. Try using a selector with the same specificity for your rule (nav.mobile_menu ul) and see if that changes things.
– misorude
Nov 14 '18 at 11:37
@misorude Thank you but it did not seem to work - problem is i cant debug on phone and pc browsers are working. I want to avoid using a paid solution like subscribing to browser stack. Can you please re check if its still being given relative ?
– AymanH
Nov 14 '18 at 11:47
Nah, sorry, can’t keep checking on the issue for you repeatedly. BrowserStack offers a free trial, it limits the time you can test to five minutes or something like that. Alternatively, hook your phone up to your computer via USB, then you can remote-debug.
– misorude
Nov 14 '18 at 12:07
add a comment |
“it is position fixed” - looks like it isn’t, when I debug this (using BrowserStack), theulelement actually hasposition:relative, coming from a rule with the selectornav.mobile_menu, nav.mobile_menu ul(fromstylesheet.min.cssout of thestockholmtheme folder.) For some reason the!importantform your own stylesheet rule doesn’t seem to work, the first rule overwrites this. Try using a selector with the same specificity for your rule (nav.mobile_menu ul) and see if that changes things.
– misorude
Nov 14 '18 at 11:37
@misorude Thank you but it did not seem to work - problem is i cant debug on phone and pc browsers are working. I want to avoid using a paid solution like subscribing to browser stack. Can you please re check if its still being given relative ?
– AymanH
Nov 14 '18 at 11:47
Nah, sorry, can’t keep checking on the issue for you repeatedly. BrowserStack offers a free trial, it limits the time you can test to five minutes or something like that. Alternatively, hook your phone up to your computer via USB, then you can remote-debug.
– misorude
Nov 14 '18 at 12:07
“it is position fixed” - looks like it isn’t, when I debug this (using BrowserStack), the
ul element actually has position:relative, coming from a rule with the selector nav.mobile_menu, nav.mobile_menu ul (from stylesheet.min.css out of the stockholm theme folder.) For some reason the !important form your own stylesheet rule doesn’t seem to work, the first rule overwrites this. Try using a selector with the same specificity for your rule (nav.mobile_menu ul) and see if that changes things.– misorude
Nov 14 '18 at 11:37
“it is position fixed” - looks like it isn’t, when I debug this (using BrowserStack), the
ul element actually has position:relative, coming from a rule with the selector nav.mobile_menu, nav.mobile_menu ul (from stylesheet.min.css out of the stockholm theme folder.) For some reason the !important form your own stylesheet rule doesn’t seem to work, the first rule overwrites this. Try using a selector with the same specificity for your rule (nav.mobile_menu ul) and see if that changes things.– misorude
Nov 14 '18 at 11:37
@misorude Thank you but it did not seem to work - problem is i cant debug on phone and pc browsers are working. I want to avoid using a paid solution like subscribing to browser stack. Can you please re check if its still being given relative ?
– AymanH
Nov 14 '18 at 11:47
@misorude Thank you but it did not seem to work - problem is i cant debug on phone and pc browsers are working. I want to avoid using a paid solution like subscribing to browser stack. Can you please re check if its still being given relative ?
– AymanH
Nov 14 '18 at 11:47
Nah, sorry, can’t keep checking on the issue for you repeatedly. BrowserStack offers a free trial, it limits the time you can test to five minutes or something like that. Alternatively, hook your phone up to your computer via USB, then you can remote-debug.
– misorude
Nov 14 '18 at 12:07
Nah, sorry, can’t keep checking on the issue for you repeatedly. BrowserStack offers a free trial, it limits the time you can test to five minutes or something like that. Alternatively, hook your phone up to your computer via USB, then you can remote-debug.
– misorude
Nov 14 '18 at 12:07
add a comment |
1 Answer
1
active
oldest
votes
0
I debugged this for you on iphone X, using Safari and it looks like nav.mobile_menu has an overflow: hidden on it. Because this technically doesn't have any height because the ul is position fixed its not showing you anything. Remove that overflow: hidden and your nav pops right up. 
answered Nov 14 '18 at 14:31
RobRob
765
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
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
});
}
});
draft saved
draft discarded
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%2f53299065%2fmenu-appearing-on-mobile-view-in-desktop-browsers-but-not-on-actual-mobiles%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
0
I debugged this for you on iphone X, using Safari and it looks like nav.mobile_menu has an overflow: hidden on it. Because this technically doesn't have any height because the ul is position fixed its not showing you anything. Remove that overflow: hidden and your nav pops right up.
answered Nov 14 '18 at 14:31
RobRob
765
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
add a comment |
0
I debugged this for you on iphone X, using Safari and it looks like nav.mobile_menu has an overflow: hidden on it. Because this technically doesn't have any height because the ul is position fixed its not showing you anything. Remove that overflow: hidden and your nav pops right up.
answered Nov 14 '18 at 14:31
RobRob
765
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
add a comment |
0
0
0
I debugged this for you on iphone X, using Safari and it looks like nav.mobile_menu has an overflow: hidden on it. Because this technically doesn't have any height because the ul is position fixed its not showing you anything. Remove that overflow: hidden and your nav pops right up.
answered Nov 14 '18 at 14:31
RobRob
765
I debugged this for you on iphone X, using Safari and it looks like nav.mobile_menu has an overflow: hidden on it. Because this technically doesn't have any height because the ul is position fixed its not showing you anything. Remove that overflow: hidden and your nav pops right up.
answered Nov 14 '18 at 14:31
RobRob
765
edited Nov 14 '18 at 14:50
answered Nov 14 '18 at 14:31
RobRob
765
answered Nov 14 '18 at 14:31
RobRob
765
answered Nov 14 '18 at 14:31
RobRob
765
765
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
add a comment |
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
YOU ARE A SAINT. Long live the KING OF THE NORTH
– AymanH
Nov 14 '18 at 14:55
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53299065%2fmenu-appearing-on-mobile-view-in-desktop-browsers-but-not-on-actual-mobiles%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
“it is position fixed” - looks like it isn’t, when I debug this (using BrowserStack), the
ulelement actually hasposition:relative, coming from a rule with the selectornav.mobile_menu, nav.mobile_menu ul(fromstylesheet.min.cssout of thestockholmtheme folder.) For some reason the!importantform your own stylesheet rule doesn’t seem to work, the first rule overwrites this. Try using a selector with the same specificity for your rule (nav.mobile_menu ul) and see if that changes things.– misorude
Nov 14 '18 at 11:37
@misorude Thank you but it did not seem to work - problem is i cant debug on phone and pc browsers are working. I want to avoid using a paid solution like subscribing to browser stack. Can you please re check if its still being given relative ?
– AymanH
Nov 14 '18 at 11:47
Nah, sorry, can’t keep checking on the issue for you repeatedly. BrowserStack offers a free trial, it limits the time you can test to five minutes or something like that. Alternatively, hook your phone up to your computer via USB, then you can remote-debug.
– misorude
Nov 14 '18 at 12:07