CSS Working In Chrome But Not In Safari

I noticed that this CSS works perfectly in Chrome, but when I open Safari, it doesn't work at all,  is there a way around this?

.header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 35.5px !important;
}

The CSS is to remove the slight jump when you hover over the dropdown menu. 

Here is the CSS. I used to create the dropdown

div.header-nav-folder-content {
    margin-top: -2.5rem;}

.header-nav-folder-item:first-of-type a {
    opacity: 1;}

Here's my website

https://www.erinncapko.com/

Thanks.

Hi,

You mean both code

div.header-nav-folder-content {
    margin-top: -2.5rem;}

.header-nav-folder-item:first-of-type a {
    opacity: 1;}

doesn't work on Safari?

on desktop or mobile?

17 hours ago, tuanphan said:

Hi,

You mean both code

div.header-nav-folder-content {
    margin-top: -2.5rem;}

.header-nav-folder-item:first-of-type a {
    opacity: 1;}

doesn't work on Safari?

on desktop or mobile?

Hello,

No,

Only this. CSS doesn't work in Safari on desktop

header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 35.5px !important;
}

The code you posted above is the code I used to create the dropdown menu, I wasn't sure if it was useful to help fix this problem. 

Thanks. 

Try this Code

div.header-nav-folder-content {
    top: 35.5px !important;
    position: relative !important;
}

On 11/2/2023 at 9:58 PM, tuanphan said:

Try this Code

div.header-nav-folder-content {
    top: 35.5px !important;
    position: relative !important;
}

 

This gets rid of these codes

div.header-nav-folder-content {
    margin-top: -2.5rem;}

.header-nav-folder-item:first-of-type a {
    opacity: 1;}

which I'm trying to keep.

I just want to get rid of slight jump that comes with the hover on the dropdown in Safari.

This CSS only works on Chrome view

header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 35.5px !important;
}

Thanks