Support » Fixing WordPress » Bridge Theme Ninja Forum z-index / css overlapping

  • 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!


    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
    Monday – Saturday
    9:00 am – 8:00 pm
    9:00 – 7:00 pm
    10:00 am – 6:00 pm
    Soup / Salad Bar / Sliced Meat
    Monday – Saturday
    9:00 am – 7:30 pm
    10:00 am – 6:30
    Beverage Bar
    Monday – Saturday
    9:00 am – 6:00 pm
    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
    Monday – Saturday
    9:00 am – 7:00 pm
    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
    Billy Griffin, ext 852   
    Store Manager
    Aaron Haley, ext 456   
    Human Resource Manager
    Pete Sherman, ext 888   
    Accounts Payable
    Davi Heintz, ext 800      
    Food Service Manager
    Vicki Stites, ext 882     
    Wellness Manager
    Nina Katovik, ext 798      
    Produce Manger
    Tammy Graham, ext 821     
    Grocery, Bulk, Chill & Frozen Buyer
    Erik Jilburg, ext 854          
    [/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]

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

Viewing 1 replies (of 1 total)
  • 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.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.