javascript - Element Keeps Leaving Div When Resized -
i've been searching around , haven't found answers particular case. want have search form aligned right of page aligned div located in. have resorted absolute positioning rather find cleaner way out me having change value of style "top: ;"
here link code: https://jsfiddle.net/nz4u376r/
and here snippet:
css:
/*----- toggle button -----*/ .toggle-nav { display: none; } .toggle-nav-button { color: #fff; padding: 12px; transition: color 0.3s ease; max-width: 45px; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .toggle-nav-button:hover { color: #0d2c87; background-color: #909f8e; -webkit-transition: background .4s ease; -moz-transition: background .4s ease; -ms-transition: background .4s ease; -o-transition: background .4s ease; transition: background .4s ease; } @media screen , (max-width: 970px) { .toggle-nav { float: left; display: inline-block; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); color: #fff; font-size: 18px; text-decoration: none; } .active { display: none; } } /*-- toggle button end --*/ /*---- main nav css ----*/ /*colors: #0d2c87 #7e8f7c | http://www.hexcolortool.com/7e8f7c#909f8e | */ .menu { background-color: #7e8f7c; height: 48px; width: 100%; } nav ul { text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); list-style: none; margin: 0; padding: 0; width: 100%; } nav li { float: left; margin: 0; padding: 0; position: relative; max-width: 190px; width: 100%; } nav { background: #7e8f7c; color: #fff; display: block; font: 16px/48px sans-serif; text-align: center; text-decoration: none; } .header-li:hover { background: #909f8e; color: #0d2c87; -webkit-transition: background .4s ease; -moz-transition: background .4s ease; -ms-transition: background .4s ease; -o-transition: background .4s ease; transition: background .4s ease; } nav li ul li:hover { background: #909f8e; color: #0d2c87; -webkit-transition: background .4s ease; -moz-transition: background .4s ease; -ms-transition: background .4s ease; -o-transition: background .4s ease; transition: background .4s ease; } nav li ul { float: left; left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 11; -webkit-transition: .4s ease; -moz-transition: .4s ease; -ms-transition: .4s ease; -o-transition: .4s ease; transition: .4s ease; } nav li:hover ul { opacity: 1; top: 48px; visibility: visible; } nav li ul li { float: none; } nav li ul a:hover { background: #909f8e; } /*-- main nav css end --*/ /*--- nav searchbar ---*/ .search-form { display: inline-block; position: relative; margin-top: 8px; margin-right: 8px; float: right; } .search-form input { width: 200px; height: 30px; padding: 0px 8px; font-size: 13px; float: left; } .search-form input:hover, input:focus { border-top: 1px ridge #3292e0; border-bottom: 1px ridge #3292e0; border-left: 1px ridge #3292e0; } .search-form button { height: 30px; /*#66a992 #0d2c87 */ color: #fff; border: none; padding: 5px; background-color: #0d2c87; } .search-form button:hover { opacity: 0.8; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } .search-from-drop { display: none; } @media screen , (max-width: 1250px) { .search-form input { width: 120px; } .active-search { display: none; } .search-from-drop { display: inline-block; } } @media screen , (max-width: 1125px) { .search-form { display: none; } } @media screen , (max-width: 840px) { .search-form { display: inline-block; right: 5%; position: absolute; top: 72px; } .search-form { float: left; } }<nav class="menu"> <ul class="active"> <li> <a class="header-li" href="">home</a> </li> <li> <a class="header-li" href="">our company</a> <ul> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> </ul> </li> <li> <a class="header-li" href="">services</a> <ul> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> </ul> </li> <li> <a class="header-li" href="">products</a> <ul> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> </ul> </li> <li> <a class="header-li" href="">resources</a> <ul> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> <li><a href="">blank</a> </li> </ul> </li> </ul> <ul class="toggle-nav"> <li> <div class="toggle-nav-button" href="#">☰</div> <ul> <li><a href="">home</a> </li> <li><a href="">our company</a> </li> <li><a href="">services</a> </li> <li><a href="">products</a> </li> <li><a href="">resources</a> </li> </ul> </li> </ul> <form class="search-form"> <input type="text"> <button><span class="active-search">search</span><span class="search-from-drop">🔍</span> </button> </form> </nav>
you try placing form outside nav-tag:
<nav class="menu"> <ul class="active"> <li> <a class="header-li" href="">home</a> </li> <li> <a class="header-li" href="">our company</a> <ul> <li><a href="">blank</a></li> <li><a href="">blank</a></li> <li><a href="">blank</a></li> </ul> </li> <li> <a class="header-li" href="">services</a> <ul> <li><a href="">blank</a></li> <li><a href="">blank</a></li> <li><a href="">blank</a></li> </ul> </li> <li> <a class="header-li" href="">products</a> <ul> <li><a href="">blank</a></li> <li><a href="">blank</a></li> <li><a href="">blank</a></li> </ul> </li> <li> <a class="header-li" href="">resources</a> <ul> <li><a href="">blank</a></li> <li><a href="">blank</a></li> <li><a href="">blank</a></li> </ul> </li> </ul> <ul class="toggle-nav"> <li> <div class="toggle-nav-button" href="#">☰</div> <ul> <li><a href="">home</a></li> <li><a href="">our company</a></li> <li><a href="">services</a></li> <li><a href="">products</a></li> <li><a href="">resources</a></li> </ul> </li> </ul> </nav> <form class="search-form"> <input type="text"> <button><span class="active-search">search</span><span class="search-from-drop">🔍</span></button> </form> this way form-element placed below navigation. in situation position of form related top of parent (the navigation). that's why needed styling pushing form down. let me know if worked , if looking for.
Comments
Post a Comment