How can I get the collapsed mobile menu to appear on top of SiteOrigin Page Builder ‘Full Width’ rows?

Asked on August 31, 2016 in Customization.

Hi!

I’m using SiteOrigin Page Builer with a child theme of Layers by Obox on this website: http://kaluste-kippari.fi/

On the desktop width everything seems fine.

On mobile view, i.e. when the browser window is narrow enough that the mobile menu button appears, when clicking the menu button, the menu collapses but stays hidden behind SiteOrigin rows that are set to ‘Full Width’ or ‘Full Width Stretched’.

I’ve seen many threads offer z-index as a solution. This works for me on the normal navigation menu (I’ve set it to 200), but I can’t figure out how to make it work for the mobile menu.

Any help much appreciated!

Cheers,
Jos

josschuurmans Layers User
Reply
1 Answer(s)
Answered on August 31, 2016.

Try adding the following in the CSS editor:

[class*=’ off-canvas-‘]{
z-index: 99999;
background-color: #333;}

 

Thanks Fernando,

First I inserted into my style.css exactly how you put it:

[class*=’ off-canvas-‘]{
z-index: 99999;
background-color: #333;}

When that didn’t work, I tried:

[class*=’off-canvas-‘] {
z-index: 99999;
background-color: #333;
}

(from the first line I removed a space and changed the apostrophes)

Still not working.

Any idea what I should try next?

Cheers,
Jos

on September 1, 2016.

Hey! As a app developer  I would like to say that  the pixel goals when the menu collapses into a mobile navigation menu. For the occasion, this setting doesn’t have a fitting base bottom limit. We recommend not utilizing a value lower than 480.

on March 27, 2019.
Reply