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!

    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]
    

    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.