My hamburger menu is not working!

phani · April 27, 2016, 7:13am

<nav role=”navigation” class=”navbar navbar-default”>

<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">DETIALS></a>
</div>

<pre><code> <div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a id="PERSONAL_PROFILE" href="#">PERSONAL PROFILE</a></li>
<li><a id="OBJECTIVE" href="#">OBJECTIVE</a></li>
<li><a id="EDUCATION_QUALIFICATION" href="#">EDUCATION QUALIFICATION</a></li>
<li><a id="TECHNICL_SKILLS" href="#">TECHNICL SKILLS</a></li>
<li><a id="INTERNSHIP" href="#">INTERNSHIP</a></li>
<li><a id="ACADEMIC_PROJECT" href="#">ACADEMIC PROJECT</a></li>
<li><a id="ACHIEVMENTS" href="#">ACHIEVMENTS</a></li>
<li><a id="STRENGTHS" href="#">STRENGTHS</a></li>
<li><a id="HOBBIES" href="#">HOBBIES</a></li>
</ul>
</code></pre>

</div>
</nav>

this is my code, it is not converting as a burger menu when i am using it in mobile. can anybody help me?`

ronpat · April 27, 2016, 7:21am

Hi, phani, Welcome to the fourms.

Where is the code that should convert this menu into a hamburger menu? Is some of your code not being displayed? You can edit your post, if that is the case.

If you have not done so, please take a few minutes and read our posting guidelines:

When you post code, please begin with three backticks on a line by themselves, then your code, then end with three more backticks on a line by themselves, like this:

```
your lines of code
```

You can also highlight your code then click the </> icon in the editor menubar to save the formatting of your code.

You can also create a CodePen or post a link to your site.

TechnoBear · April 27, 2016, 8:02am

I’ve fixed it.

phani · April 27, 2016, 11:46am

thanks for that but i am using bootstrap class so it will became responsive asthmatically

PaulOB · April 27, 2016, 5:45pm

phani:

<nav role=”navigation” class=”navbar navbar-default”>

<div class=“navbar-header”>
<button type=“button” data-target=“#navbarCollapse” data-toggle=“collapse” class=“navbar-toggle”>
<span class=“sr-only”>Toggle navigation</span>
<span class=“icon-bar”></span>
<span class=“icon-bar”></span>
</button>
<a href=“#” class=“navbar-brand”>DETIALS></a>
</div>

<pre><code> <div id=“navbarCollapse” class=“collapse navbar-collapse”>
<ul class=“nav navbar-nav”>
<li><a id=“PERSONAL_PROFILE” href=“#”>PERSONAL PROFILE</a></li>
<li><a id=“OBJECTIVE” href=“#”>OBJECTIVE</a></li>
<li><a id=“EDUCATION_QUALIFICATION” href=“#”>EDUCATION QUALIFICATION</a></li>
<li><a id=“TECHNICL_SKILLS” href=“#”>TECHNICL SKILLS</a></li>
<li><a id=“INTERNSHIP” href=“#”>INTERNSHIP</a></li>
<li><a id=“ACADEMIC_PROJECT” href=“#”>ACADEMIC PROJECT</a></li>
<li><a id=“ACHIEVMENTS” href=“#”>ACHIEVMENTS</a></li>
<li><a id=“STRENGTHS” href=“#”>STRENGTHS</a></li>
<li><a id=“HOBBIES” href=“#”>HOBBIES</a></li>
</ul>
</code></pre>

</div>
</nav>

Assuming you remove the pre and code tags and remove the wrong quotation marks from around the nav rule on the first line and use correct code quote marks then the nav will work.

Working example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a href="#" class="navbar-brand">DETAILS</a> </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a id="PERSONAL_PROFILE" href="#">PERSONAL PROFILE</a></li>
      <li><a id="OBJECTIVE" href="#">OBJECTIVE</a></li>
      <li><a id="EDUCATION_QUALIFICATION" href="#">EDUCATION QUALIFICATION</a></li>
      <li><a id="TECHNICL_SKILLS" href="#">TECHNICL SKILLS</a></li>
      <li><a id="INTERNSHIP" href="#">INTERNSHIP</a></li>
      <li><a id="ACADEMIC_PROJECT" href="#">ACADEMIC PROJECT</a></li>
      <li><a id="ACHIEVMENTS" href="#">ACHIEVMENTS</a></li>
      <li><a id="STRENGTHS" href="#">STRENGTHS</a></li>
      <li><a id="HOBBIES" href="#">HOBBIES</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

phani · April 28, 2016, 5:33am

I DONT WHY IT IS NOT WORKING FOR ME

 <html lang="en">
     <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <title>RESUME</title>
        <style>
        body {
        background-image: url("http://cdn.publishyourarticles.net/wp-content/uploads/2015/06/importance-of-employment-agencies-in-singapore-1.jpg");
        background-repeat: repeat-y;
    }
        h1{
        font-family:"Courier New", Courier, monospace;
        color:green;
        }
        nav{
        position:relative;
        font-size:14px;
        font-family:Impact, Charcoal, sans-serif;
        }
        table, th, td {
       border: 1px solid black;
    } 
    pre{
    background-color:#4dc3ff}
    #work{
         position: absolute;
       font-family:"Comic Sans MS", cursive, sans-serif;
    }
        </style>
        <script>
    $(document).ready(function(){
            $("#OBJECTIVE").click(function(){
            $("#OBJECTIVE_show").toggle("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#EDUCATION_QUALIFICATION").click(function(){
            $("#EDUCATION_QUALIFICATION_show").toggle("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#TECHNICL_SKILLS").click(function(){
            $("#TECHNICL_SKILLS_show").toggle("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#INTERNSHIP").click(function(){
            $("#INTERNSHIP_show").toggle("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#ACADEMIC_PROJECT").click(function(){
            $("#ACADEMIC_PROJECT_show").toggle("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#ACHIEVMENTS").click(function(){
            $("#ACHIEVMENTS_show").toggle("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#STRENGTHS").click(function(){
            $("#STRENGTHS_show").toggle("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#HOBBIES_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#HOBBIES").click(function(){
            $("#HOBBIES_show").toggle("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            $("#PERSONAL_PROFILE_show").hide("slow");
            });
            $("#PERSONAL_PROFILE").click(function(){
            $("#PERSONAL_PROFILE_show").toggle("slow");
            $("#HOBBIES_show").hide("slow");
            $("#STRENGTHS_show").hide("slow");
            $("#ACHIEVMENTS_show").hide("slow");
            $("#ACADEMIC_PROJECT_show").hide("slow");
            $("#INTERNSHIP_show").hide("slow");
            $("#TECHNICL_SKILLS_show").hide("slow");
            $("#EDUCATION_QUALIFICATION_show").hide("slow");
            $("#OBJECTIVE_show").hide("slow");
            });
        });
        function myFunction() {
        alert("this page is under updation so kindly come back after few moments");
    }
        </script>
    </head>
       <body onload="myFunction()">
       <div class=" services container">
      <header>
      <center><h1 NAME="TOP">RESUME</h1></center>
       <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">DETIALS</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a  class="active" id="OBJECTIVE" href="#">OBJECTIVE</a></li>
                    <li><a id="EDUCATION_QUALIFICATION" href="#">EDUCATION QUALIFICATION</a></li>
                    <li><a  id="TECHNICL_SKILLS" href="#">TECHNICL SKILLS</a></li>
                    <li><a  id="INTERNSHIP" href="#">INTERNSHIP</a></li>
                    <li><a id="ACADEMIC_PROJECT" href="#">ACADEMIC PROJECT</a></li>
                    <li><a  id="ACHIEVMENTS" href="#">ACHIEVMENTS</a></li>
                     <li><a  id="STRENGTHS" href="#">STRENGTHS</a></li>
                    <li><a id="HOBBIES" href="#">HOBBIES</a></li>
                    <li><a  id="PERSONAL_PROFILE" href="#">PERSONAL PROFILE</a></li>
        </ul>
      </div>
    </nav>
          </header>
     <section class="rows">
      <pre id ="OBJECTIVE_show" style="display:none">
     To obtain good position and to gain more knowledge since i am very intrested in learnig new things. 
     </pre>
     <pre id ="EDUCATION_QUALIFICATION_show"style="display:none">
    <table class="table">
    <tr>
    <thead class="thead-default">
    <tr>
    <th>QUALIFICATION</th>    
    <th>INSTITUTE</th>    
    <th>YEAR OF PASSING</th>    
    <th>AGGREGATE</th>

    </table>
    </pre>
    <pre id="TECHNICL_SKILLS_show" style="display:none">
     <ol >

     </pre>
     <pre id="INTERNSHIP_show" style="display:none">


    </ol>
     </pre>
     <pre id="ACADEMIC_PROJECT_show" style="display:none">
     Title: VIRTUAL BOX                                          

     Description:
     <ol>
    <li>    This is interface which helps kids  to know the basic technology so this is like an introduction for the            
                Children. </li>
    <li>    It is like a new device to work on and learn the technology.</li>
    </ol>
     Technology: .Net.
     </pre>
     <pre id="ACHIEVMENTS_show" style="display:none">
     <ol>
    <li>Along with my friend I have successfully maintained the stall about Cloud computing in my college.</li>
    <li>I have participated in many dance competitions, debates.</li>
    <li>Hosted a college program named Scientia</li>
    </ol>
     </pre>
     <pre id="STRENGTHS_show" style="display:none">
     <ol>
    <li>Adaptability.</li>
    <li>Convincing capability.</li>
    </ol>
     </pre>
     <pre id="HOBBIES_show" style="display:none">
     <ol>
    <li>Watching Movies.</li>
    <li>Listening Songs.</li>
    <li> Dancing.</li>
    <li>Surfing online to learn new things.</li>
     </pre>
     <pre id="PERSONAL_PROFILE_show" style="display:none">

     </pre>
     <center><b><a href="https://547e42e649143c493808fa9a1d8f1988e647e63c.googledrive.com/host/0B2P78QGZOGFRR3dORjF0ZTA5c2c/" id="work">portfolio</a></b></center>
       
       </section>
          </body>
          <footer>
          </footer>
    </html>

Mittineague · April 28, 2016, 7:51am

Did you read

What didn’t you understand or are having a problem with?

phani · April 28, 2016, 8:19am

in this at the begining only you can that menu

PaulOB · April 28, 2016, 8:23am

You didn’t include the bootstrap js.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

You didn’t include the code for the hamburger.

<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

You didn’t include the code for the navbar collapse (which was in your original).

<div id="navbarCollapse" class="collapse navbar-collapse">

This is how the header should look like (except that you should not be using the center tag as that was deprecated last century (almost)). Just apply text-align:center to the h1

<header>
  <center>
    <h1 NAME="TOP">RESUME</h1>
  </center>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="#">DETIALS</a> </div>
      <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a  class="active" id="OBJECTIVE" href="#">OBJECTIVE</a></li>
          <li><a id="EDUCATION_QUALIFICATION" href="#">EDUCATION QUALIFICATION</a></li>
          <li><a  id="TECHNICL_SKILLS" href="#">TECHNICL SKILLS</a></li>
          <li><a  id="INTERNSHIP" href="#">INTERNSHIP</a></li>
          <li><a id="ACADEMIC_PROJECT" href="#">ACADEMIC PROJECT</a></li>
          <li><a  id="ACHIEVMENTS" href="#">ACHIEVMENTS</a></li>
          <li><a  id="STRENGTHS" href="#">STRENGTHS</a></li>
          <li><a id="HOBBIES" href="#">HOBBIES</a></li>
          <li><a  id="PERSONAL_PROFILE" href="#">PERSONAL PROFILE</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

The above is working as was my original which you only had to look at and copy to see where you went wrong. You must pay attention to what you are doing and to what people ask of you otherwise you end up just copying and pasting without any real understanding of what you are doing.

We can’t teach you how to learn you have to do that for yourself

I suggest that you clear out all those center and pre tags and start again with a sound structure as you have mismatched tags in many places.

phani · April 28, 2016, 8:34am

omg! i understood that javscript hide and show effects are missing that is why it is not working and thank you so much for the advice i am in that process only by the how is my portfolio bro

felgall · April 28, 2016, 8:55am

1997 was last century - no almost about it.

Being able to avoid using it meant waiting for CSS 1 (introduced 1996) to actually be supported by all popular browsers but it was deprecated last century (pity they didn’t carry out the second step of the deprecation though and actually remove support for it completely - still you can do that yourself by adding user styles to your browser)…

TechnoBear · April 28, 2016, 8:56am

[ot]@phani: You need to proof-read your text, or at least use a spell-checker. For example, DETIALS (should be details), TECHNICL SKILLS (technical skills) and ACHIEVMENTS (achievements).
[/ot]

PaulOB · April 28, 2016, 9:11am

lol - I knew you’d remember the exact date

ronpat · April 28, 2016, 6:50pm

It might help if you add <!doctype html> at the top as Paul demonstrated in his working example. Details matter.

system · July 29, 2016, 1:50am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.