Jump to content

CSS Working In Chrome But Not In Safari

Recommended Posts

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.

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

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. 

Link to comment
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

Edited by ec25
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.