Close button Problem on Mobile

  • 12 January 2018
  • 4 replies
  • 81 views

I have noticed a problem I am having with sticky header I created works fine but the Close Button is sitting over one of my buttons taking up to much screen real-estate.
See image below.
this is a problem on the following iPhones
iPhone SE
iPhone 4
iPhone 5

I had to move all buttons over to the left as much as possible to fix this as much as I can.

It would be good if we can also be able to disable this button completely when we think it is necassary.

53 pm


4 replies

Userlevel 6
Badge +3

Hey @Rodney 🙂 I see you’re using this pop-up more as a nav header – there is another way to do this in Unbounce with some extra scripts/CSS so you don’t have to have that close X in the way.

Use these two scripts to set up a desktop sticky header, and the mobile menu:

  1. [Tips & Scripts] Sticky Navigation Bar For Desktop - The Code Behind Our Call-To-Action Conference Page

  2. [Tips & Scripts] Mobile Hamburger Navigation Menu

(As an example, my own landing page uses these scripts: www.zoetattersall.com)

If you need any help, shout out! 📢

So your still suggesting custom development instead of using the out of the box sticky header???

Userlevel 5
Badge +2

I second what, @Zoe_Tattersall said!

The sticky popup is more of a promo tool to get users to convert, not necessarily a navigation tool.
The links Zoe shared above make it very easy to add a sticky navigation.

If you are not very confident in implementing this, another option would to be to add buttons under the logo, vertically, with anchor links to those sections of the page (assuming that is what they do). You can always have additional CTAs throughout the page so the sticky nav is not needed as they scroll.

Good luck with this!

Thanks for the reply, but I think I will give it a whirl and just hide the x after talking with their support team.

Meghan

Reply