Homepage › Community Forums › Epik Theme Support › Epik Menu Problem in Safari
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.
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.
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.
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 ?
Ok, I tested your Demo on all of my machines, everything is fine.
Thank you.
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.
Hi…
I am looking forward for your next update .. I really like how the new menu looks like.
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.
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.