compoczar

I have the same issue. I think it's the fluid engine causing the extra space, which may be why there isn't a styling-based (CSS) solution. When I inspect my pages, there is no indication of a margin or a padding on the element. I can change the max-height, but that just makes the space above less and the space below more. My suggestion is to play with layering of your elements in the editor and make use of the "move forward/backward" and "align vertically" features. In that way you can still see the text but keep the functionality of the accordion. Then, if the elements are too crammed looking, you can add additional padding to make them look right. Good luck!

Can I change the link destinations for the shop categories? If so, I am looking to change them to anchor links so I can smooth scroll down to the product category without having to reload the page every time. Any thoughts?

My accordions have enough items to go off screen, requiring the user to scroll down manually. I am wanting the page to auto scroll when opening the accordion in the same way it auto scrolls when closing the accordion. Is this possible?

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)

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?

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?

I want to show the menu only on scroll up. There is a js for this. I am dumb and can't figure out how to install. Help? Here is the code: https://wicky.nillia.ms/headroom.js/

Amazing work! Thanks!

Site URL: https://www.matthewbridgham.com/blog /**desktop logo**/ @media screen and (min-width:767px) { #collection-60a88aded9e07e2ed6dd4a00 .header-title-logo img { content: url("https://static1.squarespace.com/static/6022b58bbc5d8f6d6e8e335e/t/60a966021a74bd0fe5759a3b/1621714434770/png-black.png") !important; max-height:inherit !important; } } /**mobile logo**/ @media screen and (max-width:767px) { #collection-60a88aded9e07e2ed6dd4a00 .header .header-title--use-mobile-logo .header-mobile-logo img { content: url("https://static1.squarespace.com/static/6022b58bbc5d8f6d6e8e335e/t/60a966021a74bd0fe5759a3b/1621714434770/png-black.png") !important; max-height:inherit !important; } } I am using the code above to change my white logo to black for light colored pages. I am currently targeting a specific page (matthewbridgham.com/blog) as a test and it seems to be working everywhere but firefox. I have searched far and wide for a solution and nothing works. Please help me.