Viewing Navigation menu and form pop up

Navigation menu and form pop up



User: Raf P. 9 years ago
Hi,

can somebody help me with this please?
Look at this page please (it's a test): http://www.katsenberg.be/test.html

Navigation menu is made in EW. Form made by a 3th party.
Use the 'reserveer' button (screenshot) at the bottom of the page. The form pops up but the navigation menu comes above the form.

-------------------------------
Kind regards,

Raphael Pairoux

Schermafbeelding 2014-11-16 om 11.17.29.png
User: Roddy 9 years ago
The form builder uses Colorbox to create the modal window which has a z-index of only 9999.

The EverWeb navigation has a z-index of 10000 so it appears above the modal window.

You could try pasting this into the Head Code box in the Page inspector…

<style type="text/css">
#colorbox, #cboxOverlay{position:absolute;top 0;left 0;z-index:10010 }
#cboxWrapper{position:fixed;top:50px;margin:0 auto;z-index: 10010 }
</style>

...but it may not work due the way in which the form code is injected into the page code and its position in the HTML doc.

In that case, you would need to modify the above settings in the colorbox.css stylesheet itself. To give you more info about this I would need to know if you are publishing to a local folder and uploading via FTP or to the EverWeb server.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Jumbo T. 9 years ago
The z-index of the EW menu is 10000, so it's on top of the colorbox div, which has a z-index: 9999.

In this stylesheet, line 18, change the z-index to 10000 or higher.

http://www.katsenberg.be/eindejaarsreservatie/colorbox/colorbox.css

Since the colorbox divs are at the bottom of the HTML code, it now is on top of the menu.
✔ Best Answer  
User: Raf P. 9 years ago
You guys are amazing!
To Jumbo: I changed the z-index to 10000 in the colorbox.css. Works perfect!
To Roddy: I upload via FTP (publish site changes). Maybe I can put a code in the Head Code that can fix the problem also. For the moment, it's like this:


<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./eindejaarsreservatie/colorbox/colorbox.css" />
<script src="./eindejaarsreservatie/common/libs_js/jquery-1.4.4.min.js"></script>
<script src="./eindejaarsreservatie/colorbox/jquery.colorbox.js"></script>
<script>
var $fb_pop = jQuery.noConflict();

$fb_pop(document).ready(function(){
$fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"680px", height:"80%", maxHeight:"1017px", fixed:true });
});
</script>

But: I'm already very happy! :-)

-------------------------------
Kind regards,

Raphael Pairoux
User: Roddy 9 years ago
I was just suggesting two ways to go about - one of which was also suggested by Jumbo. You have changed the stylesheet which is the best solution.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Raf P. 9 years ago
To Roddy,

using the EW Navigation and the Pop Up widget results in the same problem. Please change the default z-index in the widget to a higher value.

-------------------------------
Kind regards,

Raphael Pairoux
User: Roddy 9 years ago
Can you post the URL to the page?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Raf P. 9 years ago
http://www.paddocksplace.be/

But I already changed the z-index of the pop-up to 10010.

Last edit 9 years ago

-------------------------------
Kind regards,

Raphael Pairoux
User: Roddy 9 years ago
Quote:
using the EW Navigation and the Pop Up widget results in the same problem. Please change the default z-index in the widget to a higher value.

In 99.999% of websites, nothing should appear above the navigation menu in the stacking order - apart from a lightbox or modal window which need to appear above everything for obvious reasons.
Changing the default z-index in the widget is therefore not a sensible option and having a control for this would just confuse those who don't know about, or understand, stacking order.

I have made a version of the the Pop Image widget with a control for changing the z-index just for you. It has been named Pop Z Image so that it won't overwrite the original.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Raf P. 9 years ago
You're absolutely right! Navigation needs full priority and I understand that. But in this case, the client thought there was something wrong and wanted the full 'GirtCard' in front.
So I changed the PopColorbox.css already.
Thanks for the widget with the Z-index. Again, you're a big help again!

-------------------------------
Kind regards,

Raphael Pairoux


Post Reply
You must login or signup to post.