HTML/CSS - Mobile dropdown links not acting right -
i'm in process of making our mobile site , looking way want to, on mobile, when have dropdown menu open , try click on different menu below it, site clicks through different link on page. it's driving me mad! suggestions how fix it? i'd able open different dropdown menu rather link through different.
@import 'https://fonts.googleapis.com/css?family=montserrat|open+sans'; .eventstitle{ text-decoration: none; } body{ height: 100vh; min-width: 720px; margin: 0px; } #s-lg-guide-main{ flex: 1; font-family: verdana, geneva, sans-serif; min-height: 70vh; } #s-lib-public-main, #s-lib-public-header, #s-lg-guide-header, .s-lg-col-boxes{ background-color: white; border-radius: 4px; } #s-lib-public-main, #s-lib-public-header, #s-lg-guide-header{ padding: 10px; } .s-lib-box-content{ padding: 10px; } /*hide footer libguides name , links*/ #s-lib-footer-public{ visibility: hidden; } .headerbox h2 { font-size: 18px; font-weight: bold; } .sectionhead { font-size: 24px; //font-weight: bold; color: #ffffff; background-color: #4f81bd; display: block; padding-left: 14px; margin-bottom: 8px; line-height: 1.3; /* background: -moz-linear-gradient(left, rgba(79,129,189,1) 70%, rgba(79,129,189,.5) 100%); background: -webkit-linear-gradient(left, rgba(79,129,189,1) 70%,rgba(79,129,189,.5) 100%); background: linear-gradient(to right, rgba(79,129,189,1) 70%,rgba(79,129,189,.5) 100%); */ } #s-lg-guide-search-box{ margin-right: 15px; } /* .container { display: flex; flex-direction: row; } */ .menucolor{ background-color: #4f81bd; } .flexcontainer{ display: flex; } .flexrow{ flex-direction: row; } .flexcol{ flex-direction: column; } .flexchild{ flex: 1; } .flexcenter{ margin-right: auto; margin-left: auto; align-items: center; justify-content: center; } .sociallogo{ float: right; } .sociallogo a{ text-align: center; margin: 15px; } #banner, #footer{ color: white; font-family: 'montserrat', arial, helvetica, sans-serif; font-size: 16px; } #banner{ height:190px; margin: auto; margin-top: 0px; width: 100%; } .navitem a{ color: white; text-decoration:none; } .navitem a:hover{ text-decoration:underline; } #footer{ background-color: #4f81bd; padding-top: 8px; padding-bottom: 8px; } #footer ul{ list-style: none; } #footer h3{ margin-top: 0px; margin-bottom: 3px; } #searchbardiv{ margin: auto; width: 100%; height: 45px; } #headerright, #logodiv{ flex: 1; white-space: nowrap; } #headerright{ margin-right: 5px; padding-right: 3vw; } #searchform{ width: 100%; margin: 0; } #searchbar, #searchsubmit{ height: 100%; } #searchbar{ flex: 1; width: 100%; display: block; border: 1px solid lightgray; border-right-color: transparent; font-size: larger; padding: 5px; margin-right: 0px; color:black; } #searchsubmit{ margin-left: 0px; background-color: white; border-right: 1px solid lightgray; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; border-left: 0px solid lightgray; width: 60px; font-size: 1.6em; color: gray } .fixedwidth{ max-width: 1170px; margin-left: auto; margin-right: auto; } /*dropdown menu css*/ ul{ margin: 0px; padding: 0px; } .isdropdown > a::after{ content: ' \25be'; } .dropdownchild{ display: none; top: 100%; position: absolute; } .dropdownchild a:hover{ /*border-bottom: 1px solid gray; border-top: 1px solid gray;*/ box-shadow: 0px 0px 9px rgba(0,0,0,0.15) inset; } .dropdownchild a{ border-bottom: 1px solid transparent; border-top: 1px solid transparent; white-space: nowrap; } .dropdownchild li:last-child{ margin-bottom: 1px; } .dropdownparent li a{ display: block; padding: 7px; /*height: 26px;*/ } .dropdownparent .dropdownchild{ text-align: left; } .dropdownparent li{ position: relative; display: block !important; line-height: 1.5em; z-index: 100; } .dropdownparent li:hover > .dropdownchild { display: block; background-color: #4f81bd; } #headerright { width: 100%; } #mobilebanner { display: none; } /**media query mobile**/ @media screen , (max-width : 768px) { #banner { display: none; /*hides non-mobile site banner*/ } footer { display: none; } #footer { display: none; } #mobilebanner { display: inherit; font-family: verdana, geneva, sans-serif; } #mobilesearchform{ margin: auto; } #mobilesearchbar{ width: 500px; display: block; border: 1px solid lightgray; border-right-color: transparent; font-size: larger; padding: 5px; margin-right: 0px; color:black; height: 70px; } #mobilesearchsubmit{ margin-left: 0px; background-color: white; border-right: 1px solid lightgray; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; border-left: 0px solid lightgray; width: 60px; font-size: 1.6em; color: gray } #mobilesearchbardiv { margin: auto; position: relative; width: 75%; /**here postion - should 75% of width laid out**/ } .dropdownparent, .isdropdown { display: block; border: solid 1px #4f81bd; color: #4f81bd; width: 300px; font-size: 24px; margin: auto; text-align: center; } .dropdownparent a, .isdropdown a{ color: #4f81bd; } .dropdownchild { color: white; } .dropdownparent { position: relative; } .dropdownchild { margin-top: 50px; position: relative; } #logodiv { display: inline; padding-top: 30px; float: left; } .fixedwidth { margin-left: 0px; } .menucolor { display: none; } #s-lib-scroll-top { display: none; } /**drop drop low gurl**/ input[type=checkbox]{ display: none; } .mobilemenu { display: none; } input[type=checkbox]:checked ~ ul { display: block; } .bigdrop { font-size: 170px; color: #4f81bd; position: relative; float: right; margin-right: 30px; } .downsitenav { display: inline; position: relative; margin-left: 100px; } .flexcontainer li { width: 100%; font-size: 50px; } .flexcontainer { width: 100%; margin: auto; float:right; z-index: 9999; } <div id="mobilebanner"> <meta name = "viewpoint" content = "width=device-width, initial-scale=1.0"> <meta name = "viewpoint" content="target-densitydpi=device-dpi" /> <meta name = "handheldfriendly" content="true"/> <div> <div class="fixedwidth" style="height:200px;"> <div id="logodiv"> <a href="http://guides.mynpl.org"> <img style="height: 200px;" src="https://s3.amazonaws.com/libapps/accounts/103214/images/logo_1_new.png"> </a> </div> <div class="downsitenav"> <input id="downmenu" type="checkbox"> <label for="downmenu" class ="bigdrop">☰</label> <ul class="flexcontainer dropdownparent navitem mobilemenu"> <li class="flexcenter"><a href="http://selco.ent.sirsi.net/client/en_us/nor/?dt=list">catalog</a></li> <li class="flexcenter isdropdown"><a>about</a> <ul class="dropdownchild"> <li><a href="/about">about</a></li> <li><a href="/hoursholidays">hours & holidays</a></li> <li><a href="/blog">blog</a></li> <li><a href="/board">library board</a></li> <li><a href="/volunteer">volunteer</a></li> <li><a href="/policies">policies</a></li> <li><a href="/poetlaureate">poet laureate</a></li> <li><a href="http://www.northfieldpubliclibraryfriends.org/">friends & foundation</a></li> </ul> </li> <li class="flexcenter isdropdown"><a>services</a> <ul class="dropdownchild"> <li><a href="/apply">apply library card</a></li> <li><a href="/finesfees">fines , fees</a></li> <li><a href="/meetingrooms">meeting rooms</a></li> <li><a href="/technology">technology</a></li> <li><a href="/homebound">homebound services</a></li> <li><a href="/bookgroups">book groups</a></li> <li><a href="/other">other services</a></li> </ul> </li> <li class="flexcenter isdropdown"><a>e-library</a> <ul class="dropdownchild"> <li><a href="/elib">e-library</a></li> <li><a href="http://selco.lib.overdrive.com/">overdrive</a></li> <li><a href="http://northfieldmn.oneclickdigital.com/home/featured.aspx">rb digital</a></li> <li><a href="http://www.audiobookcloud.com/autologin.aspx?u=northfieldpl&p=login">audiobook cloud</a></li> <li><a href="http://www.tumblebooklibrary.com/autologin.aspx?userid=%2fzvw05gku8iuppxahdvqfa%3d%3d">tumblebook</a></li> <li><a href="http://www.tumblebookcloud.com/autologin.aspx?u=northfieldpl&p=login">tumblebook cloud</a></li> <li><a href="http://www.tbcjr.com/autologin.aspx?u=northfieldpl2&p=login">tumblebook cloud jr.</a></li> <li><a href="https://www.rbdigital.com/buckhammn/service/zinio/landing">rb digital magazines</a></li> </ul> </li> <li class="flexcenter isdropdown"><a>resources</a> <ul class="dropdownchild"> <li><a href="/genealogy">genealogy</a></li> <li><a href="/newspapers">newspaper index</a></li> <li><a href="/databases">databases</a></li> <li><a href="/?group_id=12187">subject guides</a></li> <li><a href="/readers">for readers</a></li> <li><a href="/careercollege">careers & college</a></li> <li><a href="https://docs.google.com/forms/d/e/1faipqlsf16btoxya9hqffdfkz6lhqdzo0yoppef_ldiivhw9f8j-oma/viewform">suggest purchase</a></li> </ul> </li> <li class="flexcenter"><a href="/events">events</a></li> <li class="flexcenter isdropdown"><a>teens</a> <ul class="dropdownchild"> <li><a href="/teenhomework">homework + research</a></li> <li><a href="/teenbooksreading">books + reading</a></li> </ul> </li> <li class="flexcenter isdropdown"><a>kids</a> <ul class="dropdownchild"> <li><a href="/homework">homework + research</a></li> <li><a href="/greatbooksforkids">books + reading</a></li> <li><a href="/earlylit">early literacy</a></li> </ul> </li> <li class="flexcenter"><a href="/contact">contact</a></li> <li class="flexcenter"><a href="/faq">faq</a></li> </ul> </div> <div id="mobilesearchbardiv"> <form action="http://selco.ent.sirsi.net/client/en_us/nor/search/results" id="mobilesearchform" target="_blank" class="flexcontainer"> <input type="hidden" name="lm" value="nor_limit"></input> <input type="text" name="qu" id="mobilesearchbar" placeholder="search catalog..."></input> <input type="submit" id="mobilesearchsubmit" value="go"></input> </form> </div> </div> </div> <link rel="shortcut icon" href="https://s3.amazonaws.com/libapps/accounts/103214/images/favicon.ico" />
Comments
Post a Comment