Offcanvas menu background not transparent

Question

When the page is resized, a little menu button pops up in the top menu. The menu button triggers the off-canvas menu. I want the background, as shown on this image, to be transparent, So the user could see the website, and not only a blank canvas.

I just want to add that, the function sometimes works and sometimes it doesn't.

Offcanvas

<div class="offcanvas-menu offcanvas-effect visible-xs">
            <button type="button" class="close" aria-hidden="true" data-toggle="offcanvas" id="off-canvas-close-btn">&times;</button>
            <h3>Sidebar Menu</h3>
            <ul class="list-unstyled">
                <li class="active"><a class="offcanvas-link" href="#page-top">Home<span class="sr-only">(current)</span></a></li>
                <li><a class="offcanvas-link" href="#services">Services &amp; Distribution</a></li>
                <!--<li><a class="offcanvas-link" href="#work">Works</a></li>-->
                <li><a class="offcanvas-link" href="#about">About</a></li>
                <!--<li><a class="offcanvas-link" href="#blog">Blog</a></li>-->
                <li><a class="offcanvas-link" href="#contact">Contact</a></li>
            </ul>
        </div><!-- .offcanvas-menu -->

JS

;
(function ($) {
    $.fn.extend({
        HippoOffCanvasMenu: function (options) {

            this.defaultOptions = {
                documentWrapper: '.hippo-offcanvas-wrapper',
                position       : 'hippo-offcanvas-left', // class name
                //opener         : 'hippo-offcanvas-open', // class name
                effect         : 'slide-on-top',         // class name
                contentWrapper : '.hippo-offcanvas-contents',
                closeButton    : '.hippo-offcanvas-close',
                menuWrapper    : '.hippo-offcanvas-container',  // class name
                documentPusher : '.hippo-offcanvas-pusher'
            };

            var isMobile = function () {
                var check = false;
                (function (a) {
                    if (/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))check = true
                })(navigator.userAgent || navigator.vendor || window.opera);
                return check;
            };

            var settings = $.extend({}, this.defaultOptions, options);

            return this.each(function () {

                var $this = $(this);
                var eventType = isMobile() ? 'touchstart' : 'click';

                var transitionEvent = function () {
                    var t, el = document.createElement("fakeelement");

                    var transitions = {
                        "transition"      : "transitionend",
                        "OTransition"     : "oTransitionEnd",
                        "MozTransition"   : "transitionend",
                        "WebkitTransition": "webkitTransitionEnd"
                    }

                    for (t in transitions) {
                        if (el.style[t] !== undefined) {
                            return transitions[t];
                        }
                    }
                }

                var animationEvent = function () {
                    var t, el = document.createElement("fakeelement");

                    var animations = {
                        "animation"      : "animationend",
                        "OAnimation"     : "oAnimationEnd",
                        "MozAnimation"   : "animationend",
                        "WebkitAnimation": "webkitAnimationEnd"
                    }

                    for (t in animations) {
                        if (el.style[t] !== undefined) {
                            return animations[t];
                        }
                    }
                }


                $(settings.documentWrapper)
                    .addClass('hippo-offcanvas-wrapper')
                    .addClass(settings.position)
                    .addClass(settings.effect);

                $(settings.menuWrapper).show();
                $(settings.menuWrapper).addClass('hippo-offcanvas-container');
                $(settings.documentPusher).addClass('hippo-offcanvas-pusher');
                $(settings.contentWrapper).addClass('hippo-offcanvas-contents');

                $(this).on(eventType, function (event) {


                    event.preventDefault();
                    event.stopPropagation();
                    event.stopImmediatePropagation();

                    $(this).addClass('hippo-offcanvas-button-opened');
                    $(settings.documentWrapper).addClass('hippo-offcanvas-open');
                    $('html').addClass('hippo-offcanvas-html-open');
                    $('body').addClass('hippo-offcanvas-body-open');

                    $(window).trigger('hippo-offcanvas-open', [settings, this]);
                });

                $(settings.closeButton).on(eventType, function (event) {

                    event.preventDefault();
                    event.stopPropagation();
                    event.stopImmediatePropagation();

                    $this.removeClass('hippo-offcanvas-button-opened');
                    $(settings.documentWrapper).removeClass('hippo-offcanvas-open');

                    $(window).trigger('hippo-offcanvas-close', [settings, $this]);

                    $(settings.menuWrapper).one(transitionEvent(), function (e) {
                        $('html').removeClass('hippo-offcanvas-html-open');
                        $('body').removeClass('hippo-offcanvas-body-open');

                        $(window).trigger('hippo-offcanvas-closed', [settings]);
                    });

                    $(settings.menuWrapper).one(animationEvent(), function (e) {
                        $('html').removeClass('hippo-offcanvas-html-open');
                        $('body').removeClass('hippo-offcanvas-body-open');

                        $(window).trigger('hippo-offcanvas-closed', [settings]);
                    });
                });

                $(document).on(eventType, function (event) {

                    if (!$(event.target).parents().hasClass('hippo-offcanvas-container')) {

                        $this.removeClass('hippo-offcanvas-button-opened');
                        $(settings.documentWrapper).removeClass('hippo-offcanvas-open');

                        $(window).trigger('hippo-offcanvas-close', [settings, $this]);

                        $(settings.menuWrapper).one(transitionEvent(), function (e) {
                            $('html').removeClass('hippo-offcanvas-html-open');
                            $('body').removeClass('hippo-offcanvas-body-open');

                             $(window).trigger('hippo-offcanvas-closed', [settings]);
                        });

                        $(settings.menuWrapper).one(animationEvent(), function (e) {
                            $('html').removeClass('hippo-offcanvas-html-open');
                        $('body').removeClass('hippo-offcanvas-body-open');

                        $(window).trigger('hippo-offcanvas-closed', [settings]);
                    });
                }
            });
        });
    }
});
})(jQuery);

CSS

.hippo-offcanvas-wrapper,
.hippo-offcanvas-pusher,
.hippo-offcanvas-contents {
    height : 100%;
}

.hippo-offcanvas-contents {
      /* overflow-y : scroll;
   background : #f3efe0; */
}

.hippo-offcanvas-open .hippo-offcanvas-contents,
.hippo-offcanvas-open .hippo-offcanvas-contents-inner {

}

.hippo-offcanvas-html-open, .hippo-offcanvas-body-open{
    height: 100%
}

.hippo-offcanvas-contents,
.hippo-offcanvas-contents-inner {
    position : relative;
}

.hippo-offcanvas-wrapper {
    position : relative;
    overflow : hidden;
}

.hippo-offcanvas-pusher {
    position           : relative;
    left               : 0;
    z-index            : 99;
    height             : 100%;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition : -moz-transform 0.5s;
    -ms-transition : -ms-transform 0.5s;
    -o-transition : -o-transform 0.5s;
    transition         : transform 0.5s;
}

.hippo-offcanvas-pusher::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 0;
    height             : 0;
    background         : rgba(0, 0, 0, 0.5);
    content            : '';
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -moz-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -o-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    z-index: 999;
}

.hippo-offcanvas-open .hippo-offcanvas-pusher::after {
    width              : 100%;
    height             : 100%;
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    -moz-transition : opacity 0.5s;
    -o-transition : opacity 0.5s;
    transition         : opacity 0.5s;
}

.hippo-offcanvas-container {
    position           : absolute;
    top                : 0;
    left               : 0;
    z-index            : 100;
    visibility         : hidden;
    width              : 300px;
    height             : 100%;
    background         : #27272C; /* Will Change */
    -webkit-transition : all 0.5s;
    -moz-transition : all 0.5s;
    -o-transition : all 0.5s;
    transition         : all 0.5s;
}

.hippo-offcanvas-container::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 100%;
    height             : 100%;
    background         : rgba(0, 0, 0, 0.5);
    content            : '';
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    -moz-transition : opacity 0.5s;
    -o-transition : opacity 0.5s;
    transition         : opacity 0.5s;
}

Can you post the relevant code? Also, not sure if you should be posting the link to your website. — Doug F, Nov 25 '18 at 16:00
@dougF I just added the code. I've seen other people post links to their sites before, that's why I posted mine. — strahinja, Nov 25 '18 at 16:07

score 1 · Accepted Answer · answered Nov 25 '18 at 16:11

1

I looked around with inspect element it appears to be the following code that is making the background under the navbar opaque:

.hippo-offcanvas-html-open, .hippo-offcanvas-body-open{
    height: 100%
}

When I disabled the height:100%, the page was visible underneath the popup navbar.

answered Nov 25 '18 at 16:11

AlpacaFur

195
2
12

That solved the problem, but one more problem was born when I deleted that line of code. If you click the menu button, click on "About" page, it scrolls down, but when you click on the menu button while its scrolled down, the menus height is equal to the height of the whole page, so to see the actual menu, you need to scroll up. – strahinja Nov 25 '18 at 16:19
You should be able to fix that by setting the nav div to have a fixed position on the screen, making the height 100vh and width 70vw, this means that it will scroll with the user – AlpacaFur Nov 25 '18 at 16:24
Do you have any idea on how to make the off-canvas close itself when a link is clicked? All the links have a function of scrolling to a part of a page. – strahinja Nov 25 '18 at 17:00
You could add an event listener to the entire page (`document.addEventListener("click", ...)`) and then check if the clicked element is a link. If it is, close the navbar. If it isn't, ignore it. – AlpacaFur Nov 25 '18 at 17:03
Yeah, but how do I close it? What's the code, I can't seem to find it. – strahinja Nov 25 '18 at 17:07
Oh yeah, I forgot to mention the main part, my bad. It works on the PC, but when you go to the website with a phone, and try it, it doesn't work, it wont close itself. – strahinja Nov 25 '18 at 17:10
The code that is currently being used to close it looks like it is in hippo-offcanvas.js. What browser are you using that it doesn't work in? – AlpacaFur Nov 25 '18 at 17:11
On the chrome browser, but as I said it doesn't work when I'm on the phone. It works on the PC, chrome browser too. – strahinja Nov 25 '18 at 17:14
It's kind of hard to debug this issue because it's not display based, it seems to be user-agent based. You might want to ask a separate question about it. – AlpacaFur Nov 25 '18 at 17:22

Offcanvas menu background not transparent

Offcanvas

JS

CSS

1 Answers1