# Sticky menu on mobile

**URL:** <https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436>\
**Category:** Elements\
**Created:** [September 30, 2025, 10:21pm UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436 "2025-09-30T22:21:25Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![AstraeaMarketing](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/astraeamarketing/32/26251_2.png) [@AstraeaMarketing](https://forums.realmacsoftware.com/u/AstraeaMarketing)\
**Post date:** [September 30, 2025, 10:21pm UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/1 "2025-09-30T22:21:26Z")

</div>

I am having an issue with sticky menus on mobile (iPhone 15 Pro Max). It works fine in portrait orientation but when I flip the phone to landscape and scroll, there is a gap above the sticky menu (see attached screenshot). Any thoughts on what setting I messed up to cause this? 😋

> **[Astraea Marketing Group | Full service marketing and design](https://www.astraeamarketing.com)**
>
> Astraea Marketing Group delivers marketing, graphic design, branding, web design, and SEO solutions that help businesses stand out. Based in Chester County, PA, serving clients nationwide for 25 years.

 ![IMG_2897](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/8/98f98e99849ee7cfc058327bfffa9f67669e9ade.jpeg)

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [September 30, 2025, 10:26pm UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/2 "2025-09-30T22:26:29Z")

</div>

I think you need to change your Z index to something like -31 give it a try

---

<div class="post-metadata">

**Author:** ![AstraeaMarketing](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/astraeamarketing/32/26251_2.png) [@AstraeaMarketing](https://forums.realmacsoftware.com/u/AstraeaMarketing)\
**Post date:** [September 30, 2025, 11:05pm UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/3 "2025-09-30T23:05:09Z")

</div>

Changing from 31 to -31 made the menu completely disappear.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [October 1, 2025, 12:49am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/4 "2025-10-01T00:49:09Z")

</div>

Can you show us your layout settings for the menu?

I think Paul meant “31”, not minus 31.

---

<div class="post-metadata">

**Author:** ![AstraeaMarketing](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/astraeamarketing/32/26251_2.png) [@AstraeaMarketing](https://forums.realmacsoftware.com/u/AstraeaMarketing)\
**Post date:** [October 1, 2025, 2:03am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/5 "2025-10-01T02:03:07Z")

</div>

I already had it at 31, but tried the -31 anyway. In any event, here are screenshots of my menu settings. Appreciate any advice you guys might have.

 ![Screenshot 2025-09-30 at 9.59.55 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/0/209198a6ada78a21dcfbc0c82c16fd62899121f1.jpeg)

 ![Screenshot 2025-09-30 at 10.00.09 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/1/51c502d8a2edde2076dd75db8371d85bf35f40a6.jpeg)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [October 1, 2025, 2:30am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/6 "2025-10-01T02:30:46Z")

</div>

Interesting. I have almost the identical settings on one of my sticky menus (other than the right an left 5 setting) and mine behaves correctly on both portrait and landscape on my iPhone. Try doing a test where all the edges are set to “0” and see if that makes a difference.

---

<div class="post-metadata">

**Author:** ![AstraeaMarketing](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/astraeamarketing/32/26251_2.png) [@AstraeaMarketing](https://forums.realmacsoftware.com/u/AstraeaMarketing)\
**Post date:** [October 1, 2025, 2:58am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/7 "2025-10-01T02:58:12Z")

</div>

Just tried your suggestion and made all 4 sides ‘0’ under both Layout and Mobile & Sub Menus. The menu still moves down slightly creating a gap on my phone in landscape mode. It’s not the end of the world, but would be nice if it wasn’t doing it. Appreciate your help!

---

<div class="post-metadata">

**Author:** ![Tofty](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@Tofty](https://forums.realmacsoftware.com/u/Tofty)\
**Post date:** [October 1, 2025, 3:10am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/8 "2025-10-01T03:10:52Z")

</div>

Just following along with the commentary here so I can hopefully learn something from the experts - so can somebody please explain what is the significance of the number 31 in the z-index settings. Paul said to try “something like 31” and Bob said “I already had it at 31” … so I’m scratching my head and wondering why everybody is coming up with 31 and not some other higher number.

---

<div class="post-metadata">

**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\
**Post date:** [October 1, 2025, 3:29am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/9 "2025-10-01T03:29:22Z")

</div>

Days of the month.

Only joking, I can’t even get my head around what a Z index is.

---

<div class="post-metadata">

**Author:** ![AstraeaMarketing](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/astraeamarketing/32/26251_2.png) [@AstraeaMarketing](https://forums.realmacsoftware.com/u/AstraeaMarketing)\
**Post date:** [October 1, 2025, 3:40am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/10 "2025-10-01T03:40:29Z")

</div>

This should help.

> **[Google Search](https://www.google.com/search?q=z%2Bindex&ie=UTF-8&oe=UTF-8&hl=en-us&client=safari)**

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [October 1, 2025, 5:51am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/11 "2025-10-01T05:51:50Z")

</div>

I think the reason this number has come up is because when we first started testing Elements a year ago and we ran into problems with content overlapping the menu, we kept bumping up the Z-index until the content went below the menu. The magic number was 31 when this occurred so now we use that as the minimum for a menu. Of course it can be greater, but if it is less than 31 it will be covered by the content.

Imagine if you had a stack of ten pieces of paper, the piece on the very bottom would have a Z-index of 0, while the one on the very top would have a Z-index of 10. Think of this as the “stacking order”. Moving the pieces of paper below the top one would never cover it as they would be moving below (behind) it. But if you wanted one of the pieces between the bottom and top to now be above the top, the Z-index would have to be increased to at least 11 to always be on top. Most of the time all of this happens automatically and there is no need to worry about it.

So if you have an element that you do not want to be covered by other elements in your layout you would need to ensure that its Z-index was greater than all the others.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 1, 2025, 6:11am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/12 "2025-10-01T06:11:54Z")

</div>

The container has a z index of z-30

---

<div class="post-metadata">

**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\
**Post date:** [November 23, 2025, 1:51am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/13 "2025-11-23T01:51:39Z")

</div>

I noticed the very same issue as the OP last night on my two sites. Content above the menu in landscape mode when scrolling on an iphone. Found this thread while looking for a solution. Was about to start looking at the Z settings when I just checked the sites again, both of them, and the problem is not showing.

After a while it got me wondering whether it has anything to do with dark/light mode on my phone and it does. If my phone is on light mode it looks ok, just a white space above the blackness of the menu. Hover over the picture to get an idea of actual screen shot size.

 ![Light mode](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/e/be1772488d488713475dcf8d778f897124d888d5.png)

If it is on dark mode the page shows through what is white space in light mode -

 ![Dark mode](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/5/95b393fec2a1e2086b8b58d43884164f9d0924e8.png)

I have read about dark and light modes in Elements and I have not touched them. Like CMS, it is all the devils work which I was hoping to avoid but is the solution in there? The Z index for the menu was set at 1. Changed it to 31 and it made no difference.

I could just turn off dark mode on my phone which is probably the easiest solution but now I know about it I would like to fix it.

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [November 24, 2025, 8:23am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/14 "2025-11-24T08:23:55Z")

</div>

attach your project or even just a new with headers on and I will look for you

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [November 24, 2025, 8:39am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/15 "2025-11-24T08:39:28Z")

</div>

I have just done a simple sticky menu and hero I attach 4 pics desktop/mobile 2 each one with -1 and with +1 z index to show how it works. Just a second thought do you have an outer wrapper (container) on your site with header and menu in or out? Hope this helps?

 ![Screenshot 2025-11-24 at 08.29.45](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/2/d27dd2bc2df79899a519b81fe0baad5c00f1be71.png)  
 ![Screenshot 2025-11-24 at 08.29.58](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/c/7cd29eddfbbfd3b8e19c3556f38a5321f1418e31.png)  
 ![Screenshot 2025-11-24 at 08.31.51](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/a/2a21e09ce976f973620d5184066f721a1232f5a1.jpeg)  
 ![Screenshot 2025-11-24 at 08.32.05](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/9/a9e86e80350e8735a885f8b187265bb5feb598b7.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 24, 2025, 10:04am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/16 "2025-11-24T10:04:43Z")

</div>

@AstraeaMarketing please share your project via Elements Cloud so we can inspect it and resolve the issue for you. It’s almost certainly a z-index problem that happens when sticky elements overlap other content.

---

<div class="post-metadata">

**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\
**Post date:** [November 24, 2025, 10:20am UTC](https://forums.realmacsoftware.com/t/sticky-menu-on-mobile/51436/17 "2025-11-24T10:20:56Z")

</div>

Bob at Astrea may have solved his problem so here’s mine.

Have stripped it down, published site is here - [https://www.test.blackrockq.com/](https://www.test.blackrockq.com/)

elementsapp://downloadDocument/pMLUHXWtdAha

Problem is as per post above Paul’s. Issue only shows in landscape mode on iphone when phone is set to dark mode.

Cheers for the tips Paul.
