Epik Menu Problem in Safari

This topic has 15 replies, 2 voices, and was last updated 7 years, 1 month ago by Wes.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
January 13, 2017 at 5:45 pm #20271
Ali Chakeri
Customer
Hello,

Recently we upgraded our epik theme to the new one.

Everything is great but the Menu in Safari.

The problem is that when you scroll down the page and go back up (on top) the menu is not clickable anymore. It is like sub-menus skipping when you hover your mouse over them.

You have this issue in your DEMO as well.

I would really appreciate if you solve this issue.
January 14, 2017 at 1:17 am #20273
Wes
Moderator
This reply has been marked as private.
January 14, 2017 at 5:40 am #20276
Ali Chakeri
Customer
This reply has been marked as private.
January 14, 2017 at 11:58 pm #20277
Wes
Moderator
This reply has been marked as private.
January 15, 2017 at 9:50 am #20281
Ali Chakeri
Customer
Really appreciate your support,

Yeah this is so strange, and on iPad and iPhone its the same.

Would you please tell me that how can I disable the fadeup for the menu for now ?

Ohh and a suggestion regarding your themes, It would be great if we have an option which lets us to create/use pre-defined widgets in other pages than home.

So we would be able to have pages similar to the first page for our other products.

I don’t know if this would be possible in Genesis but having it will be really handy …

Thank you again.
January 17, 2017 at 11:16 pm #20294
Wes
Moderator
I’m still doing some testing, but how does this look? – http://demo.appfinite.net/epik/

Make sure and click your Reload button or Clear your Browser Cache so it shows the latest changes I’ve made to the CSS.

I’ve removed the fade effect from the global.js file. This is how it originally looked –
```
	// Add shrink class to site header after 250px
	$(document).on("scroll", function(){

		if($(document).scrollTop() > 250){
			$(".site-header").addClass("shrink fadeup-effect");

		} else {
			$(".site-header").removeClass("shrink fadeup-effect");
		}

	});

	// Add shrink class to site header after 250px
		$(document).on("scroll", function(){

			if($(document).scrollTop() > 250){
				$(".nav-secondary").addClass("nav-hide");

			} else {
				$(".nav-secondary").removeClass("nav-hide");
			}

		});
```
I removed the fadeup-effect and decreased the px to 100px like this –
```
	// Add shrink class to site header after 100px
	$(document).on("scroll", function(){

		if($(document).scrollTop() > 100){
			$(".site-header").addClass("shrink");

		} else {
			$(".site-header").removeClass("shrink");
		}

	});

	// Add shrink class to site header after 100px
		$(document).on("scroll", function(){

			if($(document).scrollTop() > 100){
				$(".nav-secondary").addClass("nav-hide");

			} else {
				$(".nav-secondary").removeClass("nav-hide");
			}

		});
```
I also made some changes to the style.css file in the .site-header section and a couple others. Before I post that code, let me know how it looks on your end. If everything checks out then I can just add it to the new update right along with a few other minor changes I’ve made.
January 18, 2017 at 10:03 pm #20318
Ali Chakeri
Customer
Wow nice job … looks perfect.. I like it s much more than the fade effect.

I tested it using one of my devices .. but tomorrow will do more tests and will keep you updated. Now it looks fantastic.

Thank you.

Oh and one question, ould you please tell me if you accept custom jobs ?
January 19, 2017 at 3:41 am #20323
Ali Chakeri
Customer
Ok, I tested your Demo on all of my machines, everything is fine.

Thank you.
January 19, 2017 at 11:27 pm #20333
Wes
Moderator
Great!

In addition to the code I posted above, here is what I added to the .site-heeader section in the style.css file –
```
/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background-color: #303236;
	padding: 10px 0;
	position: fixed;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	width: 100%;
	z-index: 999;
}

.site-header.shrink {
	background-color: #000;
	padding: 5px 0;
	position: fixed;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
}
```
You can add this all to your files directly if you don’t want to wait for the official 1.5.1 update. If you need assistance adding this in just let me know.
January 20, 2017 at 4:19 am #20339
Ali Chakeri
Customer
This reply has been marked as private.
January 23, 2017 at 2:27 am #20365
Wes
Moderator
This reply has been marked as private.
January 23, 2017 at 3:56 am #20366
Ali Chakeri
Customer
This reply has been marked as private.
January 25, 2017 at 9:54 pm #20389
Wes
Moderator
This reply has been marked as private.
February 12, 2017 at 10:56 am #20536
Ali Chakeri
Customer
Hi…

I am looking forward for your next update .. I really like how the new menu looks like.
March 2, 2017 at 3:15 pm #20728
Ali Chakeri
Customer
Till today I only removed the part in the JS file which you mentioned. Today I also modified my CSS based on your suggestion, but I noticed that since the menu is set to be fixed, it covers my H1 titles.

Would you please help me to solve this issue ?

Thank you very much.
March 6, 2017 at 11:04 am #20780
Wes
Moderator
I don’t see any issues from my end. Can you post a screenshot of what you’re seeing so I can know what you’re referring to?

You can use a site like http://imgur.com if you need a place to upload a screenshot.
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.