Your screenshot shows your menu disappearing behind what looks like a YouTube video (not a Juicebox gallery).
(I have viewed your web site in IE11 and your menu seems to be in front of all your Juicebox galleries.)

It looks like you may need to increase the 'z-index' value for the menu elements on your web page.
In the code you posted, you have the following line:

z-index : 10;

Try increasing the 'z-index' value to 9999 to ensure that your menu is always stacked on top of the web page's other content.

If you still have inconsistent results between browsers, then try checking your web page for errors with the W3C Markup Validation Service and fix any HTML errors reported.
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.

That's good to hear. Thank you for letting me know.

This looks like a bug (the gallery title should not overlap the thumbnails) and I have notified the developers. It should hopefully be fixed in the next version of Juicebox-Pro.

There is no specific configuration option to hide the Gallery Title only in Small Screen Mode but you could achieve this by adding the following CSS to your gallery's web page:

.jb-idx-ssm-title-wrapper {
    display: none;
}

Your Africa gallery uses Juicebox-Pro v1.4.0 but your Aviation gallery uses Juicebox-Pro v1.3.3.
Upgrade your Aviation gallery to Juicebox-Pro v1.4.0 by replacing the gallery's 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.4.0 download zip package ('juicebox_pro_1.4.0/web/jbcore/').

Your galleries set showSmallPagingText="TRUE". If you do not want the thumbnail paging text to be displayed in Small Screen Mode, then set showSmallPagingText="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).

The galleryTitleHAlign configuration option (which affects the horizontal alignment of the Gallery Title) is applied only in Large Screen Mode. In Small Screen Mode, the default value of LEFT is always used.

If you create a gallery and edit it at a later date, JuiceboxBuilder-Pro will reuse the source images (to create new images and thumbnails for the gallery) only if you do anything on the 'Images' tab that requires the images to be reprocessed (for example resizing them and adding or removing a watermark).
If you open an existing gallery to edit it and change only configuration options (on the 'Customize' tab), then the images in the gallery will remain untouched.

If you want JuiceboxBuilder-Pro to reprocess the images (to use new versions of your source images), a quick and easy way to do so would be to select and then immediately deselect the 'Use Watermark' checkbox on the 'Images' tab.

Please note that JuiceboxBuilder-Pro stores the location of the source images (using sourcePath attributes to the <image> tags) in the gallery's 'config.xml' file when the gallery is initially created. If the images need to be reprocessed when editing a gallery, the source images will be used only if they still exist in their original locations on your hard drive. If the source images have been moved or renamed, JuiceboxBuidler-Pro will use the images in the gallery's 'images' folder instead.

@kilooloogung

Your gallery currently sets showSmallBackButton="FALSE". Set showSmallBackButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section) to display the Back Button in Small Screen Mode.

Your gallery AutoPlays on load when I view it on an iPod Touch 4 (I do not have an iPhone 5 to test) and the AutoPlay Button is displayed in the Button Bar and functions fine. (Tested in both Mobile Safari and Chrome .)
Try clearing your browser's cache before reloading your gallery to see if this helps.

Move the thumbnails to somewhere other than the default position of BOTTOM  (e.g. thumbsPosition="TOP") and set imageVAlign="BOTTOM". You may also want to set imagePadding="0" and stagePadding="0".

There is no Juicebox-Pro API event which you could hook into when the user hovers over the gallery.
You could perhaps use the jQuery mouseover and mouseout events (on the gallery's container) in conjunction with the API method setGallerySize().
Try something like the following. Create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script src="jbcore/juicebox.js"></script>
        <script>
            function getWindowWidth() {
                return window.innerWidth ? window.innerWidth : $(window).width();
            }
            var jb = new juicebox({
                containerId: 'juicebox-container',
                galleryHeight: '500',
                galleryWidth: getWindowWidth()
            });
            $(document).ready(function() {
                $('#juicebox-container')
                    .mouseover(function() {
                        jb.setGallerySize(getWindowWidth(), '750');
                    })
                    .mouseout(function() {
                        jb.setGallerySize(getWindowWidth(), '500');
                    });
                $(window).on('resize', function() {
                    jb.setGallerySize(getWindowWidth(), '500');
                });
            });
        </script>
    </head>
    <title>Test</title>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I have run your web page through the W3C Markup Validation Service and notice that there are two unclosed <div> elements on your web page. I do not know what part of your Drupal installation is responsible for this (Drupal core, a theme, module or custom code) but investigating this and fixing the HTML errors on your web page would be the first thing I would do. (Try using a different theme to see if your current theme is the source of the problem.)
Once the code on your web page validates correctly, your gallery should hopefully display correctly.
Even if fixing the HTML errors on your web page does not fix the problem, we will at least be able to eliminate them as a possible cause.

Also, it looks like your gallery may somehow have a width of zero.
If I give the <div class="juicebox-parent"> container on your web page a fixed width such as 800px (using Firefox's developer tools), your gallery seems to display OK.
Perhaps you could post your query in the Drupal forum. Please note that we did not write the Juicebox module for Drupal ourselves. If you post your query in the Drupal forum, the author of the module may be familiar with the problem and be able to offer a solution.

I hope this helps and points you in the right direction.

That is correct. When I click on the 'Venlo 1' link on your home page, I see no gallery on the resulting web page. (I have viewed the web page in Firefox 28.0, Chrome 34, IE11, Opera 20.0 and Safari 5.1.7.)
It looks like the CSS on your web page may be forcing the gallery container's position and/or size to be such that the gallery itself is not visible on screen.

With regard to your original query, we now plan to open up buttonBarBackColor and captionBackColor for use in Small Screen Mode as well as Large Screen Mode in a future version of Juicebox-Pro.

The Shopping Cart button is automatically disabled in Small Screen Mode (used by default to display the gallery on mobile devices) as the Fotomoto popup interface does not fit on smaller screens.
(This is noted in the Additional Notes in the Shopping Cart support section.)
You could try forcing your gallery to use Large Screen Mode on all devices and in all browsers (by setting screenMode="LARGE" in JuiceboxBuilder-Pro's 'Customize -> General' section) but you are likely to run into problems with the size of the Fotomoto popup interface.
There is no known solution to this problem which is why we automatically disable the Shopping Cart button in Small Screen Mode.

I do not see a Juicebox gallery on the web page whose link you posted (http://www.reinaertdevos.eu/content/venlo-1) although there is embedding code on the page.
The settings used in this gallery can be seen here: http://www.reinaertdevos.eu/juicebox/xm … es/default
These settings result in a white background for both the Button Bar and the Back Button (in Large Screen Mode).

However, the settings used in the 'teaser' gallery on this page: http://www.reinaertdevos.eu/
... are quite different: http://www.reinaertdevos.eu/juicebox/xm … ges/teaser
... and, because screenMode="SMALL" is used, the background for the Button Bar is the default value of 'rgba(0,0,0,.5)'.

It looks like you might want to change the settings in the 'teaser' gallery so that screenMode="AUTO" and showSplashPage="ALWAYS".

The positioning of the menu in your web page is due to the CSS in your 'style-menu2.css' file. In this file you have the following code:

body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}

In your http://vercorshandisport.org/html5/lafe … feclaz.php web page, the margin: 100px auto; entry from the line of code above creates a 100px margin around the content of your web page.
In your http://vercorshandisport.org/html5/stage2014/stage.php web page, you have the following code after the 'style-menu2.css' file has loaded.

<style type="text/css">
    body {
        margin: 0px;
    }
</style>

This overrides the body margin rule in the 'style-menu2.css' file, resulting in no margin around the content of your web page.