Parallax Pro Mobile Menu Missing

[itzsnider]

All,

I have heavily modified the Parllax Pro child theme to look and function the way I want it to. I assume since I have done this, it breaks the mobile menu theme.

The site can be located here at http://www.geekdaily.co.

The menu shows on the iPad in landscape mode but then dissapears when in portrait and on the iPhone 6Plus and lower.

Any ideas?

http://www.geekdaily.co

[itzsnider]

I went line by line with the CSS so I can only assume this is java related.

What is called via my functions file is the header-fade.js

jQuery(function($){$(window).scroll(function(){if(window.innerWidth>768){var yPos=($(window).scrollTop());if(yPos>100){$("header.site-header").fadeIn();}else{$("header.site-header").fadeOut();}};});});jQuery(document).ready(function(){if(jQuery('#full-image-new').length){var height=jQuery('#full-image-new').height();jQuery('.featuredSpaceHolder').height(height);}
jQuery('.featuredContainer').on('click','.story-cover-arrow',function(){var height=jQuery('#full-image-new').height();var offset=jQuery('header').outerHeight(true);jQuery('html, body').animate({scrollTop:(height- offset)},2000);});jQuery('.home-section-1').on('click','.smooth-scroll',function(){var height=jQuery('.home-section-1').outerHeight(true);var offset=jQuery('header').outerHeight(true);jQuery('html, body').animate({scrollTop:(height- offset)},2000);});});jQuery(document).ready(function(){resizeFunStuff();jQuery(window).resize(function(){resizeFunStuff();});});function resizeFunStuff(){if(window.innerWidth<768){var outerHeight=jQuery('.site-header').outerHeight(true);var windowHeight=jQuery(window).height();var newHeight=windowHeight- outerHeight;jQuery('#full-image-new').css({"top":outerHeight,"height":newHeight+"px"});}else{jQuery('#full-image-new').css({"top":"0","height":"100%"});};}

[itzsnider]

Or is there a way to invoke a different menu for mobiles smaller than the 768?

[Davinder Singh Kainth]

Menu button is there but it look invisible due to white color.

The hamburger icon is white color against the white background makes it invisible, Change its color and it should be all good.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Davinder Singh Kainth]

To be specific, change #fff color code in the following code as seen in style.css file

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: 10px;
}

.responsive-menu-icon::before {
	color: #fff;
	content: "\f333";
	font: normal 24px/1 'dashicons';
	margin: 0 auto;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

I updated the above to make it 268ece which is a bright blue, still nothing on the iPhone 6+.

Something about it doesn't show the header when scrolling etc. In Chrome it shows the header and the hamburger when I scroll up just for a second though.

I assume something is overriding it all.

[Davinder Singh Kainth]

Ohk, I checked on iPhone 6 - whole header including your logo is not showing. Are you using any custom code in functions file to hide specific elements for mobile devices?

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

Here is my functions.php

http://pastebin.com/d4CyB5D7

[Davinder Singh Kainth]

To isolate what is causing this issue. Can you disable / remove the following script and check?

        wp_enqueue_script( 'header-fade', get_bloginfo( 'stylesheet_directory' ) . '/js/header-fade.js', array( 'jquery' ), '1.0.0', true );

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

Removed

[Davinder Singh Kainth]

Ok, now in the following code in style.css file

.site-header {
	background-color: #fff;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
        display: none;
        border-bottom:2px solid #268ece;
}

Remove z-index and display: none to make header visible.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

Okay now that works, BUT defeats the purpose of the original "feature".

Since my site relies heavily on images, I wanted the header to be "missing" on load so you see all of the image. NOw it's a white header above the image.

Is there a way to do both?

[Davinder Singh Kainth]

1. Revert back CSS change as done in previous step. Make site-header display:none.

2. But make site-header display: block in following section of css

@media only screen and (max-width: 768px) {

This will hide header in the normal view but in the smaller mobile view header will show along with mobile menu. Further you can refine it to hide logo and show just the menu part.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Davinder Singh Kainth]

Also, the script that you disabled - don't load it for mobile devices. Make it load only on desktop devices.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

Okay makes perfect sense!! Done and working as advised, how do I not load it for mobile devices?

AND could you help me center the logo over the Hamburger?

THANKS SOO MUCH FOR WHAT YOU HAVE DONE THUS FAR!!

[Davinder Singh Kainth]

This post has example on how to exclude script from mobile devices.

https://sridharkatakam.com/scroll-animations-wordpress-using-smoove/

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

Thanks a ton Davinder, I appreciate the help and super fast help!

Now i am off to make it look centered and prettier on mobile.

[Davinder Singh Kainth]

Welcome!

Actually I am going to bed, it's 12:34am at night. Head is spinning else would have shared the final code. If still issue, just update this thread or ping me on twitter, will follow-up in the morning - my time 🙂

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[itzsnider]

IT is now working as I originally wanted with a little hacking, LOVE it!

Please mark this thread as resolved!!

Thanks Davinder!

[Author]

Posts