css - Wordpress Drop Down Menu on Mobile Not Responding / Working -
im hoping can me solve issue. have started using wordpress instead of coding , stuck on drop down menu right. site newsby2.com looks great , how want on laptop , menu not drop down on laptop when go mobile supposed drop down not responding. word menu appears in red , when click on it changes white color nothin comes down. ive tried putting inline on of codes did displayed submenu right away without me having click on it. want when click on word menu sub menu appear.
/*--------------mobile menu-------------------*/ #mobile-menu { display:none; position:relative; margin:0 15px; } #mobile-menu > span { display:inline-block; text-transform:uppercase; font-family:'rokkitt', serif; font-size:24px; cursor:pointer; color:#e03d3d; } #mobile-menu > span:hover { color:#fff; } #toggle-view-menu { display:none; list-style: none; margin: 0; padding: 0; border-top: none; position:absolute; top:33px; left:0; z-index:99999; width:220px; } #toggle-view-menu > li { margin: 0; position: relative; cursor: pointer; list-style: none; background-color:#e03d3d; border-top:1px solid #fff; } #toggle-view-menu > li:first-child { border-top:none; } #toggle-view-menu h3 { font-size: 18px; margin: 0; float: left; line-height: 40px; padding: 0 15px; } #toggle-view-menu h3 { color: #fff; width:100%; display:block; } #toggle-view-menu li:hover { background-color: #c72f2f; } #toggle-view-menu span { float: right; font-size: 26px; width: 40px; height: 40px; text-align: center; color: #fff; line-height: 40px; background-color:#c72f2f; } #toggle-view-menu li.active { background-color:#c72f2f; } #toggle-view-menu li.active span, #toggle-view-menu li.active h3 { color:#fff; } #toggle-view-menu .menu-panel { margin: 0px; display: none; padding: 10px 15px 0; font-size: 14px; color: #fff; background-color:#c72f2f; border-top:1px solid #fff; } #toggle-view-menu .menu-panel ul { margin:0; } #toggle-view-menu li .menu-panel ul li { border:none; list-style:disc inside; margin: 0 0 10px 0; color:#fff; } #toggle-view-menu .menu-panel ul li { display:inline-block; *display:inline; zoom:1; color:#fff; font-size:12px; } #toggle-view-menu .menu-panel ul li ul { margin-left:40px; margin-top:10px; } #main-content { padding:25px; background-color:#fff; } /* =========================================================
you need add jquery detect clicking text.
jquery("#mobile-menu > span").click(function() { jquery("#toggle-view-menu").slidetoggle(500); return false; });
feel free edit 500 control speed.
more info on slidetoggle
Comments
Post a Comment