Jump to content

menu items disappearing on safari only - css custom

Go to solution Solved by compoczar,

Recommended Posts

This is so strange. Mobile/desktop for chrome and Firefox are both fine. However, safari keeps hiding my custom menu. What the heck is going on?

Here is the code:

/*unique menu with icons*/
  .header-display-desktop {
    display: flex !important;
}
  .header-display-mobile {
    display: none !important;
}
  .header-burger {
    display: none !important;
}
  .header-nav {
    display: flex !important;
}
  .header-title-nav-wrapper {
    display: flex !important;
}
  .header-nav-list {
    flex-wrap: nowrap !important;
}
    .header-nav-item {
    font-size: 0px !important;
}
  .header-layout-nav-right .header-nav-list {
    justify-content: center !important;
}
  .header-announcement-bar-wrapper {
    padding-bottom: 0 !important;
}
  .header-title {
    flex: 100% !important;
}
  .lightbox-link {
    font-size: 0px !important;
  }
  .header-nav-item:nth-child(1) a::before {
    content: '\3f';
    font-family: FontAwesome;
    font-size: 18px !important;
    display: inline-block;
    padding-right: 20px !important;
} 
 .header-nav-item:nth-child(2) a::before {
    content: '\f07a';
    font-family: FontAwesome;
    font-size: 18px !important;
    display: inline-block;
    padding-right: 20px !important;
}  
.header-nav-item:nth-child(3) a::before {
    content: '\f0e0';
    font-family: FontAwesome;
    font-size: 18px !important;
    display: inline-block;
}
/*end*/

Only thing I can think of is an issue with FontAwesome and Safari. Safari is updated. I cleared the cache. I restarted the browser. I restarted my computer.

Also, the items show for a second then disappear. Sometimes they will reappear if I inspect element and then disappear again. Other times it just reappears after letting the page sit idol enough.

Bug?

Edited by compoczar
typo
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I notice that it has something to do with the following part 

  .header-nav-item {
    font-size: 0px;
}
  .lightbox-link {
    font-size: 0px;
}

Combined with the font-size changes in the nth-child sections. There must be a better way to replace text with an icon without adding the icon before and reducing the font-size to hide the text...right?

Link to comment
  • Solution

Fixed it! I need to change 

  .header-nav-item {
    font-size: 0px;
}
  .lightbox-link {
    font-size: 0px;
  }

to

  .header-nav-item a {
    font-size: 0px;
}
  .lightbox-link a {
    font-size: 0px;
  }

I'm guessing it has something to do with how safari processes the css stylesheets (not a coder, but it seems browser specific)

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.