Mobile site layout via Squarespace 7.1 - Floating player obscures site menu

Ask the Community General Questions
1

I’m using Squarespace and have attempted to solve this via the CSS editor to adjust the z-index for both the header container and the elfsight player with no results. I also tried to do a CSS override for the z-index directly in the elfsight web editor, but no joy so far. I’ve used the developer tools to get the appropriate container names (as best as I can tell), but I’m likely missing something with the custom CSS adjustments, but any help would be appreciated.

my site is https://www.brianlhgunter.com/

The code (and variants) i was trying to use started here:

header {
  z-index: 99999 !important; /* Adjust value as needed */
}

and here:

/* Replace '.elfsight-player-container' with the actual class/ID you found for the Elfsight player */
.elfsight-player-container {
  z-index: 1 !important; /* Or a lower value than your menu's z-index */
}

Cheers all.

1 Like
2

Hi there, @Brian_Gunter :waving_hand:

I checked your website, and it seems like the footer menu is being hidden by the Audio Player now. No worries, we’ll surely figure this out for you :folded_hands:

To be on the same page, could you please share what modification exactly did you have in mind? Where do you want the Audio Player to show up instead? A screenshot with a scribble would help a lot :smiley:

I also had an idea – what if we add some space at the very bottom of the footer about the height of the widget? This way, when you scroll all the way down, the footer will show up above the Audio Player, as the widget will take up the extra bottom space added. What do you think?

1 Like
4

EDIT - For the short term I have added extra “pages” to the menu to act as a buffer which does allow a workaround for the mobile format. However, the extra “pages” show up at the bottom of the menus as visible in the desktop format. It’s ultimately livable if need be, but it doesn’t look as professional IMO. So if there’s still a CSS solution as I described below, I’d be grateful!

Hello @Irene ! Thanks for responding. All I really need is the following:

  1. Audio player widget appears on the home page only. So far so good there.

  2. When opening the menu (hamburger style icon), particularly in mobile format, I want the menu to open as the top most layer and to appear in “front” of the audio player.

The primary desktop format works just fine and I have zero issues in the desktop mode of my site. As it sits now in the mobile format, the menu opens “behind” the audio player and the lower options on that menu are obscured by the audio player widget. I tried to see if I could further customize the menu so when in mobile format there was more of a scroll option, but I am not currently able to customize this on the Squarespace side. So I’m hoping there’s something with CSS code that I can add via Squarespace’s CSS loader, or via the CSS options in the Elfsight audio player widget editor itself.

Thanks again, I really appreciate any help or insights to this at all!

Cheers!

5

@Irene, I also tried your footer suggestion, but this does not seem to have an affect on the menu masking issue in the mobile format. Thank you, though!

8

Hello @Brian_Gunter, thank you so much for the explanation! It seems I was way off in interpreting your question earlier, so sorry for that :sweat_smile:

But now I totally get the picture, and I’m happy to let you know that the devs added this CSS code to your Audio Player to fix it up:

.global-styles,
[class*="FloatingMobile__Container-sc"] {
  z-index: 9 !important;
}

Please check and let me know if it’s looking good now :smiling_face:

2 Likes
9

Hi @Irene , you and the team absolutely NAILED IT! Thank you so much! The result was spot on perfect.

Cheers!

3 Likes