html - Disfunctioning anchor jump -
the anchor jump home
when click "home" button not working, here's code:
<header> <div id="header_container"> <div class="menulogo"> <img id="logo" /> </div> <a href="#home"><div class="menuitem">home</div></a> <div class="menuitem">over</div> <div class="menuitem">contact</div> <div id="mobile_menu_button"></div> </div> </header> <div id="body_container"> <div id="banner_container"> <img id="banner" /> </div> <div name="home" id="content_container"> <div id="home_container"></div> </div> </div>
* { padding: 0; margin: 0 auto; } body { background: rgb(223,227,238); text-align: center; } header { min-width: 100%; background: rgb(50,50,50); height: 80px; position: fixed; z-index: 10; } #header_container { max-width: 1024px; height: 100%; } #header_container div { float: left; display: inline-block; width: 25%; } #logo { width: 50%; height: auto; } .menuitem { padding-top: 29px; height: calc(100% - 29px); border: 0; text-align: center; font-family: signika; font-size: 25px; color: rgb(203,207,218); } .menuitem:hover { border-bottom: 4px solid rgb(59,89,202); height: calc(100% - 33px); color: rgb(160,170,218); } .menulogo { padding-top: 14.5px; height: calc(100% - 14.5px); border: 0; text-align: center; } #mobile_menu_button { display: none; } #body_container { padding-top: 80px; } #banner_container { position: fixed; left: 0; right: 0; } #banner { width: 1024px; height: auto; } #content_container { background: rgb(235,235,240); max-width: 1024px; height: 100%; position: relative; top: 300px; } #home_container { width: 100%; min-height: 100px; height: 1000px; }
and representative jsfiddle
anchors work ids. if want anchors make jump home, must add id="home"
on , not name="home"
!
so change div
<div id="home">
instead of
<div name="home">
Comments
Post a Comment