Bridge Theme Ninja Forum z-index / css overlapping

[jessejmelanson]

Hello Everyone,

If you visit the contact page of my site you’ll see that the ninja form on the right column isnt working because some DIV is covering it – I think?

I am using the Bridge theme that uses qcode. This page is mostly edited and set in the “classic” block.

I’ve tried looking over the post (which is copy and pasted below) and changing the z-index numbers hoping the form would come forward, but have not had luck. This is what the support team at Ninja Forums told me to do. Also tried moving the column from the right to left, top to bottom etc.. but it still did the same thing.

If anyone could help me sort this out, it would be greatly appreciated as I have been trying to fix this for many, many hours (and days!) but I guess I don’t know what I am doing…

Thank you for reading and any help!

Jesse

Here is the text in my post that I have on the contact page. I put the z index part, and where the ninja forum is placed in bold.

[vc_row css_animation="" row_type="row" use_row_as_full_screen_section="no" type="full_width" angled_section="no" text_align="left" background_image_as_pattern="without_pattern" <strong>z_index="-1"</strong>][vc_column][qode_google_map custom_map_style="false" google_maps_scroll_wheel="false" address1="11357 Donner Pass Rd C, Truckee, CA 96161" address2="505 W Lake Blvd, Tahoe City, CA 96145" zoom="10" map_height="500" pin="205"][/vc_column][/vc_row][vc_row css_animation="" row_type="row" use_row_as_full_screen_section="no" type="grid" angled_section="no" text_align="left" background_image_as_pattern="without_pattern" <strong>z_index="-1" </strong>css=".vc_custom_1516308507518{margin-top: 50px !important;margin-bottom: 50px !important;}"][vc_column width="1/2"][vc_column_text css=".vc_custom_1529364946639{margin-top: 50px !important;}"]

 
New Moon-Truckee

11357 Donner Pass Rd.
Suite C
Truckee, CA 96161

(530) 587-7426

 

HOURS OF OPERATION

Store:

Monday – Saturday

9:00 am – 8:00 pm

Sunday

9:00 – 7:00 pm

Café:

Sandwiches

Everyday

10:00 am – 6:00 pm

Soup / Salad Bar / Sliced Meat

Monday – Saturday

9:00 am – 7:30 pm

Sunday

10:00 am – 6:30

Beverage Bar

Monday – Saturday

9:00 am – 6:00 pm

Sunday

10:00 am – 5:00 pm

[/vc_column_text][vc_column_text css=".vc_custom_1516311004292{margin-top: 50px !important;margin-bottom: 150px !important;}"]

 
New Moon-Tahoe City

505 W. Lake Blvd

Tahoe City, CA 96145

(530) 583-7426

HOURS OF OPERATION

Monday – Saturday

9:00 am – 7:00 pm

Sunday

10:00 am – 6:00 pm

[/vc_column_text][/vc_column][vc_column width="1/2"][vc_column_text css=".vc_custom_1520293442419{margin-top: 50px !important;margin-bottom: 150px !important;}"]

 

<strong>Get In Touch!

Questions? Comments? Please include as much info as possible, and we'll do our best to respond in a timely manner,

[/vc_column_text][ninja_form id="5" z_index="100"][vc_row_inner row_type="row" type="full_width" text_align="left" css_animation=""][vc_column_inner][vc_column_text css=".vc_custom_1527539505435{margin-top: 0px !important;}"]</strong>

New Moon Directory

Owner

Billy Griffin, ext 852   

billy@newmoonnaturalfoods.com

Store Manager

Aaron Haley, ext 456   

aaron@newmoonnaturalfoods.com

Human Resource Manager

Pete Sherman, ext 888   

pete@newmoonnaturalfoods.com

Accounts Payable

Davi Heintz, ext 800      

davi@newmoonnaturalfoods.com

Food Service Manager

Vicki Stites, ext 882     

vicki@newmoonnaturalfoods.com

Wellness Manager

Nina Katovik, ext 798      

nina@newmoonnaturalfoods.com

Produce Manger

Tammy Graham, ext 821     

tammy@newmoonnauralfoods.com

Grocery, Bulk, Chill & Frozen Buyer

Erik Jilburg, ext 854          

erik@newmoonnaturalfoods.com

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row css_animation="" row_type="row" use_row_as_full_screen_section="no" type="full_width" angled_section="no" text_align="left" background_image_as_pattern="without_pattern"][vc_column][/vc_column][/vc_row]

• This topic was modified 5 years, 2 months ago by jessejmelanson.
• This topic was modified 5 years, 2 months ago by Jan Dembowski.

The page I need help with: [log in to see the link]

[Howdy_McGee]

The left column has a id="stores" div and inside that div is a container with a class section_inner. The section_inner CSS is the following:

width: 1100px;
margin: 0 auto;
position: relative;
z-index: 20;

This is both giving it a very large width and a high z-index which is overlaying the forum. IMO when dealing with containers like this it’s always best to use max-width instead of a static width, you could overwrite the code with the following in your child theme CSS file or through The Customizer Additional CSS tab:

.boxed .section .section_inner,
.grid_section .section_inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

The issue is that you don’t really know the full implications of that until you add it and browse or peruse your site for a bit. The alternative is to just remove the section_inner class from the id="stores" module in Visual Composed page.

– – – – –

Additionally, you would want a higher z-index if you really want to set a z-index. The higher a z-index the more “on top” it will show.