Demian

@creedonOnce again, you come to the party with the best snacks and drinks (sorry, that's a really poor metaphor for 'the CSS that fixes my issue'). Once again, thanks a bunch 🙏⭐️

Hello again @creedon, do you think you could please offer a suggestion as to how I would get the mobile (double line hamburger) nav icon staying in place? Like it's desktop counterpart, it also seems to move several pixels up on initial swipe. I tried pasting (what I'm guessing is) the positioning code from your desktop nav fix within what I know targets the mobile hambuger, and it doesn't have the desired effect (note: I'm also fixing some off-center shenanigans with the code below) @media only screen and (max-width: 786px) { .header-display-mobile { display: block !important; } } .header-display-mobile .header-display-mobile, .header-display-mobile .header-burger { position: absolute !important; left: 50%; transform: translate(-15px); --padding : 0vw; padding-bottom : var( --padding ); padding-top : var( --padding ); } Thanks again! ⭐️

Thanks for taking the time to clarify @Ziggy. 🙏

Thanks a mill' @creedon. You're a star!

Hi @creedon, I'm picking up this somewhat old topic, hoping you're still around to help out 🤞🙏 Like the previous poster, I'm trying to use your code to stop the fixed nav from moving up and down slightly on scroll down/up. Either I'm doing something wrong or, as you pointed out, SS has changed their base code and what you supplied is no longer compatible. URL: https://www.gamecreative.sydney Pass: Gameon85 Thanks a bunch to you (or anyone else) for picking this up again.

Thank you for the reply @Ziggy, I apreciate you taking the time to look at my question. May I ask what mobile OS and browser you are on? (you're definitely not looking at the 'mobile version' of the site on a desktop right? Because it doesn't show the error when previewing mobile on a desktop.) Strange that the G A M E images are so large though and thank you for pointing this out to me! I've added them using the below code and as you'll see, they are set to scale to 15% height of window... so unless you have a 30cm tall phone 😅🤔, this shouldn't be happening? Or am I missing something here? I'd be interested in hearing if anyone else can see the not-quite-centered hamburger as I do... and even more so, if someone has a solution! 🙏🙏🙏 <img src="https://images.squarespace-cdn.com/content/6651283fe26f292de1083d55/be4f900f-e84f-4b8b-bae4-247b82f8905e/G.png" height="15%" class="tp-sticky-img-g"/> <style> img.tp-sticky-img-g { position: fixed; top: 3vw; left: 3vw; z-index: 900; } </style>

Hi there, As the post title says, I would love some help centering the mobile nav hamburger/close buttons using custom CSS. I've already found and implemented the code below which works perfectly in the squarespace/desktop environment (when adjusting browser window to be mobile size) but once viewed on an actual mobile device, it's not quite centered – at a guess, I'd say it's off (to the right) by 3-5% [see mobile screen grabs attached]. Note: I only have an iPhone, so can only test Chrome and Safari on that – it might just be iPhone specific? I any case, it would be awesome if someone out there had an answer for this. Site pass is: Gameon85 Thanks /*Center Mobile Hamburger*/ @media only screen and (max-width: 786px) { .header-display-mobile { display: block !important; } } .header-display-mobile .header-display-mobile, .header-display-mobile .header-burger { display: block !important; margin: 0 auto !important; } .header-display-mobile .header-mobile-logo { text-align: center !important; }

Okay, did some digging and managed to figure this last little tweak out myself - whereby I wanted the effect to only apply to the homepage. Thought I'd post in case anyone else stumbles across this. You'll need to find out the collection ID of the homepage (or page you want this effect to be specific to). You can do this using the inspect function of your browser. Find body id= (very near the top of the code) and you'll want to copy "collection" and the long string of letters and numbers afterwards, eg. "collection-5fab8b7a8424282166b75a81" Once you have that copied into your clipboard go to the Custom CSS area of your site. You need to wrap #collection-5fab8b7a8424282166b75a81 (where that long string is your own copied collection id) around the code that @bangank36 provided. So it would look something like: #collection-5fab8b7a8424282166b75a81 { header:not(.shrink) .header-nav-wrapper a { color: #fff !important; } header:not(.shrink) .header-title-logo img { filter: brightness(0) invert(1); } header:not(.shrink) .header-nav-folder-content { background-color: transparent !important; } } Violá!

Holy moly @bangank36! That is some elegant and creative code - I love that you used a filter to change the logo color. I was expecting to need jquery and I love that it doesn't. Truely excellent. There is one quite significant problem however, in my original post I wrote "On the homepage only" What I meant was that I only want this behaviour on the homepage. Everywhere else I want the navigation to use the pink on white BG version - what the navigation changes to once scrolling has commenced. Reason being is that all other pages on the website have a white BG so, as it is now, the nav can't be seen. You can see this on the Contact page for example, or the About page where the nav can't be seen until you scroll the page down and it changes to pink on white BG. So to be clear, on the page named "home" I want the nav to begin as White with a transparent BG and then, once scrolling has begun, I want the nav to change to pink with a white BG (this part is happening perfectly now, thanks to you). On all other pages I want the nav to always appear pink with a white BG - there is no need for it to change color (this is the part that is not happening). Is this still possible? Thanks again for your time and knowledge!!

Site URL: https://www.ballihoo.co.za/home Okay, this is a pretty specific question but the use case is actually quite common from a design perspective. To explain: I have a white BG navigation with pink logo (PNG) and text/links. It also uses the Transparent option under Edit Site Header > Colors. This is of course throughout the site and works great for the most part, but... On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in function of setting the navigation to Transparent) I want the text and logo to change to pink. It's a bit tough to put in words so hopefully the images and link help to covey the request. And this change would have to be able to be applied to the drop-downs from foldered nav items, because this looks awful...