Responsive sticky hamburger navigation bar
Question
I am trying to make a responsive sticky navigation bar which will shorten when the screen gets too small (for mobile). The navigation bar works fine without the hamburger bars on my laptop, but i am struggling to implement the following code on W3C with my code.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
the following is a link to jsfiddle with the HTML, CSS and Javascript code I am using.
HTML
https://jsfiddle.net/cpeotvsf/25/
below is my code
<body>
<div class="top-container">
<h1>testing header</h1>
<h3>Scroll down to see learn more.</h3>
</div>
<div class="header" id="myHeader">
<div class="navbar" id="Mynavbar">
<a href="#home">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Red or Black Tarmac Drives and Paths</a>
<a href="#">Fencing and Gates</a>
<a href="#">Shingle and Coloured Gravels</a>
<a href="#">Drainage Work</a>
<a href="#">Patios and Crazy Paving</a>
<a href="#">Block Paved Driveways and Paths</a>
<a href="#">Turfing and Artificial Grass</a>
<a href="#">Brick and Purbeck Stone Walls</a>
<a href="#">Decking and Rockeries</a>
</div>
</div>
<a href="#home">Gallary</a>
<a href="#home">Before and After</a>
<a href="#home">Testimonials</a>
<a href="#home">Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunctionn()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
The CSS and Javascript I am using are in the jsfiddle link above
Any help on this would be greatly appreciated
1 answers
solution1
0 ACCPTED 2018-06-04 22:04:06
Your js is fine but jsFiddle keeps the script's load-type on load rather than at the bottom of the page so the onClick can't find the following function:
function myFunctionn() {
// place this script below your body content.
}
To make the above function run properly in jsFiddle , just click JavaScript + No-Library (pure JS) ▼ and change the load type to bottom of body then re-run the script.
jsFiddle with load type updated: https://jsfiddle.net/cpeotvsf/35/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.