compoczar Posted December 13, 2022 Share Posted December 13, 2022 (edited) 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 December 13, 2022 by compoczar typo Link to comment
compoczar Posted December 13, 2022 Author Share Posted December 13, 2022 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 compoczar Posted December 13, 2022 Author Solution Share Posted December 13, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment