# Sticky Menu

**URL:** <https://forums.realmacsoftware.com/t/sticky-menu/50897>\
**Category:** Elements\
**Created:** [September 9, 2025, 9:15pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897 "2025-09-09T21:15:59Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [September 9, 2025, 9:16pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/1 "2025-09-09T21:16:00Z")

</div>

When using a sticky menu what is the easiest way to get the background hero image, slider, or any content to be behind the menubar at the top with no negative space? I did figure out a workaround but I’m curious is there is a simple setting I’m missing. I’ve figured out how to accomplish a ton of complex layouts in Elements and this one thing is irking me that there isn’t a simple solution…or is there?

---

<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 9, 2025, 10:18pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/2 "2025-09-09T22:18:23Z")

</div>

You change z index to something like -34.

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [September 10, 2025, 12:38am UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/3 "2025-09-10T00:38:55Z")

</div>

I quickly made this to demonstrate…I threw a sticky menu on top and then a background with a screen height image fill. I set the Z-index to -40 and the sticky menu is white until you scroll down and then the image is in the background of it… I want to always show the image behind the menu without having to start messing around with positioning up.

 ![Screenshot 2025-09-09 at 8.34.17 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/8/182b2ab9cb1333aab5f5cd289b5a2bef8e80ccd8.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 10, 2025, 8:46am UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/4 "2025-09-10T08:46:15Z")

</div>

Sorry I think I misunderstood do you want menu to be opaque so you can see image? if so the you go to background and reduce opacity, also make it a global once happy and just put it on every page.

---

<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:** [September 10, 2025, 10:02am UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/5 "2025-09-10T10:02:42Z")

</div>

Oh, you mean like this?

[![CleanShot 2025-09-10 at 11 .01.33@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/1/91e32093a20488ee9069259fb6417154803bedf6.jpeg)](elementsapp://downloadDocument/daDlvz90Lqs8)

👉 [Open Project in Elements](elementsapp://downloadDocument/daDlvz90Lqs8)

---

<div class="post-metadata">

**Author:** ![KaiHawaii](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/kaihawaii/32/2234_2.png) [@KaiHawaii](https://forums.realmacsoftware.com/u/KaiHawaii)\
**Post date:** [September 10, 2025, 11:48am UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/6 "2025-09-10T11:48:03Z")

</div>

I´m also trying to build a Sticky-Menu like this, on our Classic-Site [https://partyservice-hoppmann.de](https://partyservice-hoppmann.de)  
but I can´t figured out how to setup the Menu settings 😯

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [September 10, 2025, 12:34pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/7 "2025-09-10T12:34:26Z")

</div>

Yes…I’ve built a lot of layouts in Foundry using video backgrounds, etc…with a sticky menu at the top. Trying to find a simple solution in Elements without having to start vertically shifting everything upwards. Thanks for any guidance.

---

<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:** [September 10, 2025, 12:48pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/8 "2025-09-10T12:48:03Z")

</div>

Okay, I had a bit of play and came up with this solution…

It uses the menu component plus a little custom component to apply the magic scrolling effects.

👉 [Open the Project in Elements](elementsapp://downloadDocument/K7gQJdEVS7zQ)

---

<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:** [September 10, 2025, 12:49pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/9 "2025-09-10T12:49:46Z")

</div>

> [@gfcreative](#):
>
> Trying to find a simple solution in Elements without having to start vertically shifting everything upwards. Thanks for any guidance.

Change the Layout from “Sticky” to “Fixed” and that should do it for you (see an example of this in the project above).

 ![CleanShot 2025-09-10 at 1 .48.54@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/2/820e9673d7d3abe4674ed2066d4a4ffc72190326.jpeg)

---

<div class="post-metadata">

**Author:** ![KaiHawaii](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/kaihawaii/32/2234_2.png) [@KaiHawaii](https://forums.realmacsoftware.com/u/KaiHawaii)\
**Post date:** [September 10, 2025, 1:16pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/10 "2025-09-10T13:16:14Z")

</div>

Wow. Excellent. Thx Dan 👍  
I just started looking at the Custom Components and how they work.

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [September 10, 2025, 1:29pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/11 "2025-09-10T13:29:32Z")

</div>

Super….that just made my life so much easier!!! Thank you!!!

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [September 10, 2025, 1:37pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/12 "2025-09-10T13:37:16Z")

</div>

Thank you Dan! So essentially it accomplished the sticky menu effect but allows the full background to show through…exactly what I was attempting. I’ll have to start learning more with Tailwind coding. I originally built sites with straight HTML a bazillion years ago code and then lost a lot of my code skills once I started using products like Adobe Muse, then RapidWeaver, and now Elements. I really appreciate the video. Thank you.

---

<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:** [September 10, 2025, 2:22pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/13 "2025-09-10T14:22:32Z")

</div>

No problem, always happy to help 🙂

The next build of Elements will have a Fixed Menu included in the Templates area…

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [September 10, 2025, 2:37pm UTC](https://forums.realmacsoftware.com/t/sticky-menu/50897/14 "2025-09-10T14:37:16Z")

</div>

Now that I know that simple fix I’ll be great moving forward. But for a lot of other people that haven’t discovered that tweak, this new menu will make life easier. Thanks again.
