Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Mobile menu doesn't show up when using lightview

Hi,

since I'm using lightview my mobile menu doesn't open anymore and I can not figure out the problem. Does anybody knows this problem and can help me?
I'm using standard lightview options on this page: fahrradtrial-rhein-main.de/galerie_test.php
I add my menu css below, sorry I'm not familar with forum rules and how to add code. Hope it's understandable.

Thanks and best regards!

/* Menu */

menubar{

width: 100%;
height: auto;
display: block;
background-color: #1e1e1e;
border-bottom: solid 3px #21b4ea;

}

menu{

width: 100%;
height: auto;
float: right;
background-color: #1e1e1e;    

}

menu ul{

width: 100%;
margin: 0px;
padding: 0px;
text-align: left;

}

menu ul li{

display: inline-block;
margin: 0px;
padding: 0px;

}

menu ul li a{

position: relative;
display: block;
padding: 15px 25px 15px 25px;
color: #fff;
text-decoration: none;
z-index: 1;
text-transform: uppercase;
font-weight: normal;

}

menu ul li a:before{

content: '';
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 0px;
background-color: #21b4ea;
transition: all 250ms;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
-o-transition: all 250ms;
-ms-transition: all 250ms;
z-index: -1;

}

menu ul li a:hover:before{

height: 100%;

}

/* Menu Icon */
.menu-icon{
display: none;
float: left;
position: relative;
overflow: hidden;
margin: 0px;
padding: 0px;
width: 35px;
height: 45px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s;
top: 5px;
left: 10px;
background-color: transparent;
}

.menu-icon:focus{
outline: none;
}

.menu-icon span{
display: block;
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 5px;
background-color: #21b4ea;
}

.menu-icon span:before, .menu-icon span:after{
position: absolute;
display: block;
left: 0;
width: 100%;
height: 5px;
background-color: #21b4ea;
content: "";
}

.menu-icon span:before{
top: -10px;
}

.menu-icon span:after{
bottom: -10px;
}

.menu-icon-x span{
transition: background 0s 0.3s;
}

.menu-icon-x span:before, .menu-icon-x span:after{
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}

.menu-icon-x span:before{
transition-property: top, transform;
}

.menu-icon-x span:after{
transition-property: bottom, transform;
}

.menu-icon-x.is-active span{
background: none;
}

.menu-icon-x.is-active span:before{
top: 0;
transform: rotate(45deg);
}

.menu-icon-x.is-active span:after{
bottom: 0;
transform: rotate(-45deg);
}

.menu-icon-x.is-active span:before, .menu-icon-x.is-active span:after{
transition-delay: 0s, 0.3s;
}

/* Mobile Style */
@media screen and (min-width:550px){
#menu{
display: block !important;
}
}

@media screen and (max-width:550px){

.menu-icon{
    display: block;
}

#menu{
    display: none;
    height: auto;
}

#menu ul li{
    display: block;
    margin: 5px 5px 5px 5px;
    padding-left: 50px;
}

}

Comments

  • edited June 2016

    As far as I can tell from the code on your page, all that's happening when you click that mobile button is that it's toggling a class:

    var MENU_OPEN = false;
    
    $('.menu-icon').stop().click(function(){
        if(MENU_OPEN === false){
            MENU_OPEN = true;
            $('.menu-icon').addClass('is-active');
        }
        else{
            MENU_OPEN = false;
            $('.menu-icon').removeClass('is-active');
        }
    });
    

    So it makes sense that nothing opens, it's just a class on that element. There's no other code there that's opening a menu. I don't see how Lightview would be affecting this, it doesn't remove code or elements from your page.

Sign In or Register to comment.