hidden element in css to show upon toggling using onclick event via Javascript function

Question

I am trying to create a function on my hamburger icon to show an element in smaller screens which is manipulated as display:none directly in my css. I am able to make it appear on the screens that are below 800px when toggled but it dissappears quickly in a matter of just few milliseconds. i have been figuring out what should be done but i couldnt find answers.

HTML

<body>
<nav>     
    <a class="toggle" href="" onclick = "func1()"><i class="fas fa-bars" > 
</i></a>
<ul id="defaultnav" class="topnav">
    <li class="current"><a class = "navlinks" href = "">Home</a></li>
    <li><a class = "navlinks" href  = "Services.html">Services</a></li>
    <li><a class = "navlinks" href = "About.html">About</a></li>
    <li><a class = "navlinks pointer" 
onclick="document.getElementById('id01').style.display='block'" 
style="width:auto;">Login</a></li>
    <li><a class = "navlinks" href  = "Signup.html">Sign Up</a></li>
</ul>  
</nav>    


<script src="./script/test.js"></script>
</body>

CSS

.toggle {
 width:100%;
 margin:0;
 padding:0 15px 0 0 ;
 font-size:20px;
 display:none;
 color:#ffd34f;

}

.toggle:hover{color:white;}


@media screen and (max-width:800px){

#defaultnav{display:none;}

.toggle{display:block;}
}


@media screen and (max-width:800px){


#defaultnav.responsive { 
display:block;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background:#1a1a1a;
right: 15px;
width: 50%;
border-radius: 20px 0 15px 10px;
z-index:99999;

}

#defaultnav.responsive li {
text-align: center; 
width: 100%;
padding: 10px 0;
margin: 0;
}

}

JAVASCRIPT

function func1() {
var x = document.getElementById("defaultnav");
if (x.className === "topnav") {
    x.className += " responsive";
} else {
    x.className = "topnav";
}
}

why you put nav tag and after body the nav has to be inside body — לבני מלכה
– לבני מלכה, Commented Aug 19, 2018 at 8:18

Gautam Naik · Accepted Answer · 2018-08-19 09:06:21Z

The a tag had empty href attribute, add href="javascript:void(0)" to prevent the default action of the browser.

<a class="toggle"  href="javascript:void(0)" onclick="func1()"><i class="fas fa-bars" >

You can also add href="#", but ,clicking this will navigate you to the top of the page, in case the a tag is at the bottom

function func1() {
  var x = document.getElementById("defaultnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.toggle {
  width: 100%;
  margin: 0;
  padding: 0 15px 0 0;
  font-size: 20px;
  display: none;
  color: #ffd34f;
}

.toggle:hover {
  color: white;
}

@media screen and (max-width:800px) {
  #defaultnav {
    display: none;
  }
  .toggle {
    display: block;
  }
}

@media screen and (max-width:800px) {
  #defaultnav.responsive {
    display: block;
    position: fixed;
    padding: 20px;
    border: 2px solid #FFB600;
    background: #1a1a1a;
    right: 15px;
    width: 50%;
    border-radius: 20px 0 15px 10px;
    z-index: 99999;
  }
  #defaultnav.responsive li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
}

<nav>
  <a class="toggle" href="javascript:void(0)" onclick="func1()"> Click here<i class="fas fa-bars" > 
</i></a>
  <ul id="defaultnav" class="topnav">
    <li class="current"><a class="navlinks" href="">Home</a></li>
    <li><a class="navlinks" href="Services.html">Services</a></li>
    <li><a class="navlinks" href="About.html">About</a></li>
    <li><a class="navlinks pointer" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</a></li>
    <li><a class="navlinks" href="Signup.html">Sign Up</a></li>
  </ul>
</nav>

this has got the job done! thank you so much! that syntax was not discussed on the tutorials that i have watched..

Shawn Janas · Accepted Answer · 2018-08-19 08:57:51Z

1

Add href="#" to a tag and also display:block !important; to #defaultnav.responsive { css

answered Aug 19, 2018 at 8:57

Shawn Janas

2,7532 gold badges16 silver badges10 bronze badges

Collectives™ on Stack Overflow

hidden element in css to show upon toggling using onclick event via Javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related