custom sticky header cause canvas menu not working properly on safari

[kookimyong]

I have done some custom sticky header and added the following codes, chrome and firefox both are working fine on canvas menu, but safari got problem as per screenshot, how to fix this?

@media screen and (max-width: 991px) {
#jas-header {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: auto;
z-index: 99999;
overflow: hidden;
}

#jas-header.compact {
border-bottom: medium none;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12);
}

#jas-content {
padding-top: 165px;
}
}

@media screen and (max-width: 480px ) {
#jas-content {
padding-top: 120px;
}

.header__mid {
padding-top: 0;
padding-bottom: 5px;
}
}

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can fix this issue. by move div contain menu and cart out of header.

https://monosnap.com/file/mFn9kQb4gFQp7fABz1DxNrmKZJmi0x#

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[kookimyong]

This reply has been marked as private.

[Harry]

You can add custom css

.jas-push-menu {z-index: 999999; }

 

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts