Hamburger Button Error

[mikael]

Hi all,

I am currently trying to personalised my codecademy pro projects by adding more features to the projects I built using html, css, js, jq, and bs. As I believe the problem is in my JQ, I posted this in JQ forum, if it is not JQ related, I apologise in advance for posting it here.

The problem I encountered is in the jumpstart project when I decided to add a “hamburger” icon to the mobile version of the website. It started well, the navigation texts become nested in a “hamburger” icon when I shrink my browser. The problem arises when I close the hamburger button and enlarge my browser. The hamburger icon disappear (as intended), but so does the navigation texts. How do I make the text to appear automatically as I re-enlarge my browser?

I have tried googling for insights but no luck. Can anyone please help me out?

html

<div class="navigation">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <div class="toggle">
            <i class="fa fa-bars menu" aria-hidden="true"></i>
          </div>
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">Explore</a>
            </li>
            <li>
              <a href="#">Start a Project</a>
            </li>
            <li>
              <a href="#">About Us</a>
            </li>
          </ul>
         </div>
        <img src="../project/resources/images/logo.png" class="navbar-brand navbar-right navbar-collapse logo">
      </div>
    </nav>
  </div>

JS

$(".menu").click(function(){
  $("ul").slideToggle("slide");
});

CSS

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

 .toggle {
   display: block;
 }

 .toggle i:hover {
   color: lightblue;
 }

 ul {
   width: 100%;
   display: none;
 }

 ul li {
   display: block;
   text-align: left;
   padding-left: 2.5rem;
 }

nav navbar {
  display: block;
}

 .slide {
   display: block;
 }

}

Thank you!

[stetim94]

i put your code in a bin:

http://jsbin.com/zegoxev/edit?html,css,js,output

But the hamburger menu is not working in the first place? What i am missing?

[mikael]

Hi @stetim94 thank you for your reply,

I think we need to link the html with bootstrap, as my code involve bootstrap as well. I have added it to the JS Bin, and the hamburger shows up.

[stetim94]

External libraries you are using, is always useful to include in the topic. I could have seen it, but its easy to miss something

now let me have a look

[stetim94]

the toggle element has a width of zero:

how is that?

i added the library:

JS Bin - Collaborative JavaScript Debugging

but its not given the hamburger menu, please give me a way to replicate the problem. Which bootstrap library did you include? Such information is needed

[mikael]

Hi @stetim94 sorry for the late reply,

I included these bootstrap links

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

I actually solved the problem. The reason why the navigation menu didn’t show up after I expanded my screen is because the “display: none” is added automatically when i close the hamburger menu. II believe it acted that way due to the way i wrote my jQuery code (pardon me for this as my jQuery knowledge is still limited). But in the spirit of do more and write less, i included a css syntax instead of fixing my jQuery as follow

@media only screen and (min-width: 781px) {
  ul {
    width: 100%;
    display: block !important;
  }

And it works.
Thank you so much for trying to help me out, i really appreciate it, also, sorry for the limited information i gave, i am still new to this community.

[stetim94]

Yep, now the hamburger menu works. Next time, ensure all the code is there to replicate the problem.

css uses a point system to determine which property to apply in case of conflicting properties.

using !important is a bad idea, given it screws up the point system. But then, jquery using inline style, so you have to use important.

Not a nice solution of jquery, i am surprised. It works, but its not the best solution. You would be wise to read upon the css point system to understand this

its seem to be named specificity, see here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity