i have hamburger navigation, know code menu work copied out of other pages on same site. on particular page when click button drop down appears outside of space should appear, when hover on links should text changed if in correct position. have tried hours figure out on own, things have tried have been clearing both * , body margin/padding, re-organizing code , bunch of other tricks have read about...nothing works. wrong code?
markup :
<head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <div class="header"> <div class="mobile-nav"> <div class="menu-btn" id="menu-btn"> <div></div> <span></span> <span></span> <span></span> </div> <div class="responsive-menu"> <ul> <li><a href="index.html">home</a></li> <li><a href="mepage.html">about me</a></li> <li><a href="resumepage.html">resume</a></li> <li><a href="contactpage.html">contact</a></li> </ul> </div> </div> <div class="headtext"> <h1>how can contact me</h1> </div> </div> </div> <div class="ewrap"> <div class="elist"> <h2>you can join email list</h2> <div class="center"> <div id="mc_embed_signup"> <form action="//brettwray.us11.list-manage.com/subscribe/post?u=0019715a1627a714a1cca620c&id=e0cbe16c08" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <input type="email" value="" name="email" class="email" id="mce-email" placeholder="email address" required> <!-- real people should not fill in , expect things - not remove or risk form bot signups--> <div style="position: absolute; left: -5000px;"> <input type="text" name="b_0019715a1627a714a1cca620c_e0cbe16c08" tabindex="-1" value=""> </div> <div class="clear"> <input type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </div> </form> </div> </div> <!--end mc_embed_signup--> <p>i promise never spam you, update on projects , occasional picture of dozer.</p> </div> <div class="email"> <h2>joining list isn't thing?</h2> <div id="envelope"> <a href="mailto:brett@brettwray.com?subject=brettwray.com%20inquiry" target="_top"><i class="fa fa-envelope-o fa-5x"></i></a> </div> <p>you can <a href="mailto:brett@brettwray.com?subject=brettwray.com%20inquiry" target="_top">email me.</a></p> </div> </div> <div id="social-header"> <h2>is email old school you?</h2> <h3>then can find me on social media.</h3> </div> <div class="social"> <div class="facebook"> <i class="fa fa-facebook-official fa-5x"></i> </div> <div class="insta"> <i class="fa fa-instagram fa-5x"></i> </div> <div class="twitter"> <i class="fa fa-twitter-square fa-5x"></i> </div> <div class="linkedin"> <i class="fa fa-linkedin-square fa-5x"></i> </div> </div> </body> css:
@import url(http://fonts.googleapis.com/css?family=indie+flower); body { background-color: rgba(189, 186, 186, 0.3); } .header { position: absolute; top: 0; left: 0; background-color: rgba(189, 186, 186, 0.3); border-bottom: 2px solid #7ec9b1; box-shadow: 0 4px 90px #7ec9b1; width: 100%; height: 400px; line-height: 400px; background: #fff url(http://i57.tinypic.com/2a796e0.jpg) no-repeat center; background-size: cover; } .menu-btn div { position: absolute; top: 64%; padding-right: 8px; margin-top: -0.50em; line-height: 1.2; font-size: 18px; font-weight: 200; vertical-align: middle; z-index: 99; cursor: pointer; } .menu-btn span { display: block; width: 24px; height: 4px; margin: 5px 0; background: rgb(0, 0, 0); z-index: 99; cursor: pointer; } .responsive-menu { display: none; } .expand { display: block !important; float: right; } .menu-btn { float: right; padding: 10px 10px 10px 5px; } .responsive-menu li { list-style-type: none; border: 1px solid black; width: 180px; height: 40px; background: #000222; } .responsive-menu ul li { text-decoration: none; display: block; text-align: center; margin-top: 13px; font-family: helvetica, verdana, "trebuchet ms"; color: white; } .responsive-menu ul li a:hover { text-decoration: underline; font-size: 18px; } .responsive-menu li:hover { border: 2px solid white; } .headtext { width: 900px; height: 200px; margin-left: auto; margin-right: auto; margin-top: 200px; line-height: 200px; } .headtext h1 { font-size: 80px; font-family: 'indie flower', cursive; color: #fff; text-shadow: 3px 3px 6px #000; text-align: center; } .ewrap { position: absolute; top: 440px; display: table; width: 100%; height: 200px; margin-top: 0px; border-spacing: 10px; } .elist { display: table-cell; border: 2px solid #7ec9b1; text-align: center; width: 40%; border-radius: 9px; } .email { display: table-cell; border: 2px solid #7ec9b1; text-align: center; width: 40%; border-radius: 9px; } .email h2, .elist h2 { font-size: 32px; font-family: 'indie flower', cursive; padding-top: 10px; text-shadow: 2px 2px 1px #7ec9b1; } .email p, .elist p { vertical-align: text-bottom; font-size: 20px; font-family: helvetica, verdana, "trebuchet ms"; padding-bottom: 5px; } .email p { padding-top: 35px; } .email { text-decoration: none; color: #000; font-size: 20px; font-family: helvetica, verdana, "trebuchet ms"; font-weight: bold; } #mc_embed_signup #mc-field-group { clear: left; font: 14px helvetica, arial, sans-serif; } .center { display: inline-block; } #mc-embedded-subscribe-form { padding: 20px; } div.mc-field-group { padding: 10px; } #mc_embed_signup input.button { background-color: #7ec9b1; color: #fff; height: 30px; width: 150px; margin-top: 10px; border: none; border-radius: 6px; font-size: 18px; font-family: helvetica, verdana, "trebuchet ms"; } #mc_embed_signup input.email { height: 30px; width: 300px; font-size: 20px; font-family: helvetica, verdana, "trebuchet ms"; } #social-header { position: absolute; top: 720px; margin-left: auto; margin-right: auto; width: 100%; text-align: center; } .social { position: absolute; top: 820px; width: 60%; height: 100px; margin: 0 20%; display: table; } #social-header h2 { font-size: 32px; font-family: 'indie flower', cursive; padding-top: 10px; text-shadow: 2px 2px 1px #7ec9b1; text-align: center; } #social-header h3 { text-align: center; font-size: 20px; font-family: 'indie flower', cursive; } .facebook { display: table-cell; text-align: center; font-size: 40px; margin: auto 0; } .insta { display: table-cell; text-align: center; font-size: 40px; } .twitter { display: table-cell; text-align: center; font-size: 40px; } .linkedin { display: table-cell; text-align: center; font-size: 40px; } .facebook:hover, .insta:hover, .twitter:hover, .linkedin:hover { color: #7ec9b1; } jquery:
jquery(function($) { $('.menu-btn').click(function() { $('.responsive-menu').toggleclass('expand') }) })
update following css :
.responsive-menu ul li { text-decoration: none; display: block; text-align: center; font-family: helvetica, verdana, "trebuchet ms"; color: white; /* added css rule */ line-height:35px; height:35px; margin-top:0; } 
Comments
Post a Comment