Responsive menu in blogger is invisible on mobile devives but visible on desktop version


#1

This the css code for the menu that I am using for my blogger template , and on the mobile version the menu is there but it is not visible. please help me in solving this.

Code :slight_smile: /***************************************** Main Menu CSS ******************************************/ #navigation {height:auto } .nav-menu { background: #f3f3f3; margin: 0 auto; padding: 0; width: 100%; z-index: 299;border-bottom: 4px double #ddd;border-top: 1px solid #ededed; } .nav-menu ul{ list-style:none; margin:0; padding:0; z-index: 999; } .nav-menu ul li { display: inline-block; line-height: 1; list-style: none; padding: 0; position:relative;}

.nav-menu li a { color: #444; display: block; font-size: 12px; padding: 17px 20px; position: relative; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-family: montserrat,sans-serif; } .nav-menu li a:hover { color: #444; }

.nav-menu li a:before,.nav-menu li a.current:before { content: “”; position: absolute; background: $(primary.background.color); border: 0px; width: 80%; height: 2px; bottom: -3px; left: 10%; opacity: 0; } .nav-menu li a:hover:before,.nav-menu li a.current:before{ opacity:1; transition:opacity .15s linear; }

.nav-menu ul li ul { position: absolute; width: 200px; background: #f3f3f3; top: 102%; visibility:visible; opacity:0; box-shadow: 0px 0px 20px -10px #000; -moz-box-shadow: 0px 0px 20px -10px #000; -webkit-box-shadow: 0px 0px 20px -10px #000; -o-box-shadow: 0px 0px 20px -10px #000; } .nav-menu ul li:hover ul{ visibility:visible; opacity:1; transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; } .nav-menu ul li ul li { width: 100%; position:relative; }

.nav-menu ul li ul li:hover a { background: #fff; } .nav-menu ul li ul li a:before{ width: 3px!important; height: 100%!important; left: -1px!important; top:0!important; }

.sticky { position: fixed; top: 0px; border-bottom: 1px solid #ddd; z-index: 99999; }