Page content visible behind sticky menu

1. The menu doesn’t look great because it doesn’t have a background color by itself. You can fix this by adding the following CSS code:

#primary_menu {
   background: rgba(255,255,255,0.8);
}

2. The reason why the menu goes from its original position to the left, is because its general style has a position: absolute attached to it:

primary_menu {
    position: absolute;
    top: 10px; 
    right: 0; 
}

I can’t say what the purpose of that is, but when an element has a position: absolute by default, it will conflict with the sticky plugin. If you can remove it from your code, I would recommend to do so.

if there is supposed to be a button (like the one under my slider), I’m not getting that either.

I’m not really sure what you mean by that. Could you explain please?

@ajm62 Can you please create a new thread for your issues?

Re: button. . . I was just referring to the Tags field that are below this text box (where we type our messages to each other) — it refers to a button. Sounds like there’s not supposed to be one, so no problem.

The translucent box for the sticky menu is a great start! Thanks! I’ll search for the absolute position thing and see if I can delete it.

@senff

Ok, I changed absolute to fixed, and this keeps the menu where it is, but I now have the translucent box all the way across and partially covering the menu. I found what to change using the Inspector in Firefox, but I cannot see where to put it. This gets the box the correct width, then keeps it to the right (vs when I changed the width, it moved it to the left)… is there an easier way than this for me to accomplish it?
<div class=”sticky-element-placeholder sticky-element-active” style=”display:block; float:right; flex:; box-sizing:content-box; clear:none; overflow:visible; transform:none; width:600px; height:50px; margin:0px 0px 0px 0px;”></div>

If you set the menu to be fixed (using position: fixed), then it will always be fixed, and you do not need my plugin for that (which is meant to make it fixed only after you scroll a certain amount).

It is now only a matter of how you’d like to style it within your theme, but this CSS might be a good start:

`#primary_menu {
width: 100%;
left: 0;
}`

Thanks!

I may still use the plugin as deactivating it moves it all over to the far right, and then I can still see the page content scrolling right behind the menu items since the background of the menu is still see-through vs opaque. With yours, I think I just have to figure out how to make the sticky background opaque white.

J

• This reply was modified 7 years ago by gatehealing.

Hi, I have the same issue as @gatehealing:
When I scroll down, the main content of the page is visible behind the sticky menu, so it looks sloppy.
I have set Z-index to 99999 (as recommended) but that didn’t help
My theme: Appointment
My website: https://www.gusbach-boules.de/
Thanks a lot in advance for your help!
Lothar

• This reply was modified 7 years ago by gusbach.

@gusbach This is because your menu doesn’t have a background color, so you might want to add that, with something like this:

#menu-hauptmenue {
   background: rgba(255,255,255,0.8);
}

Thank you, Mark, your hint solved my problem!
Have a great day,
Lothar

Hi Dear,
I installed this sticky menu bar, but due to white colour in background and font can,t see property , main content of page is visible only on that place. when move curser there , it showing red. Can you please help to make it whole menu bar black or same colour and visible with CSS ?

I want to add more padding at the top above menu bar as well as some below. Can you help with CSS code for that?

@dhm2018 This forum is for help with the Sticky Header plugin, not for generic CSS help. For that, please check the www.remarpro.com support forums here.