walrus walrus - 1 year ago 97
jQuery Question

Hamburger menu not working properly

I am working on my personal website and couldn't get hamburger working.

Right in mobile, it is just all menu options in one row, not in different rows like classic hamburger look.

Initially, hamburger didn't work at all but i added

/*******HAMBURGER FIX*********/
part from a website and now it is working but as i said, not correctly.



html {
height: 100%;
}

body {
background-image: url('background.png');
background-size: cover;
background-position: center;
}

#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

#const {
color: #FFFFF5;
font-weight: bold;
font-size: 5em;
}

hr {
width: 1000px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}

.social i {
padding-top: 100%;
font-size: 3em;
color: #cccccc;
}

.sections {
padding-top: 5%;
}

.sections .section-option i {
padding-top: 15px;
color: #999999;
font-size: 13em;
}

.logo {
font-size: 1.2em;
}


/*******HAMBURGER FIX*********/

@media (min-width: 991px) and (max-width: 768px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse,
.navbar-toggle {
display: block !important;
}
.navbar-header {
float: none;
}
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<!-- jquery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- font awesome CDN -->
<script src="https://use.fontawesome.com/7627dbb339.js"></script>
<title>Halil Süheyb Becerek</title>
</head>

<body>

<!-- start of the navbar -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>
<a class="navbar-brand" href="#"><i class="fa fa-code logo" aria-hidden="true"></i> Halil Süheyb Becerek</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Blog</a></li>
<li><a href="#"><i class="fa fa-github" aria-hidden="true"></i> Projects</a></li>
<li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Work / <i class="fa fa-university" aria-hidden="true"></i> Education History</a></li>
</ul>

<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i> About</a></li>
<li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</div>
</nav>
<!-- end of the navbar -->

</div>
</div>

<div class="container">
<div id="content">
<div class="row">
<!-- <div id="const" class="col-xs-12">
SITE UNDER CONSTRUCTION

<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
10%
</div>
</div>


</div> -->
<div class="sections">
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-university" aria-hidden="true"></i></a></div>
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>
<div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></div>
</div>

</div>

<div class="row">
<div class="social">
<div class="col-xs-2"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></div>
<div class="col-xs-2"><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></div>

</div>
</div>
</div>
</div>

</body>

</html>




Answer Source

You need to add

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You need to remove two closing div tags after nav tag. other than that i find no issue.

CSS

html{
        height: 100%;
    }
body{

    background-image: url('background.png');
    background-size: cover;
    background-position: center;
}
#content{
    text-align: center;

    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                 0px 8px 13px rgba(0,0,0,0.1),
                 0px 18px 23px rgba(0,0,0,0.1);
}
#const{
    color: #FFFFF5;
    font-weight: bold;
    font-size: 5em;
}
hr{
    width: 1000px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2)
}

.social i{
    padding-top: 100%;
    font-size: 3em;
    color: #cccccc;
}
.sections{
    padding-top:5%;
}
.sections .section-option i{
    padding-top: 15px;
    color:#999999;
    font-size: 13em;
}
.logo{
    font-size: 1.2em;
}

/*******HAMBURGER FIX*********/
@media (min-width: 991px) and (max-width: 768px) {
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display: block !important;
}
.navbar-header {
    float:none;
}}

HTML

 <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><i class="fa fa-code logo" aria-hidden="true"></i>    Halil Süheyb Becerek</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>    Home</a></li>
            <li><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>    Blog</a></li>
            <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i>    Projects</a></li>
            <li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i>    Work /    <i class="fa fa-university" aria-hidden="true"></i> Education History</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>    About</a></li>
            <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i>    Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
     </div>
    </nav>
    <!-- end of the navbar -->

    <div class="container">
        <div id="content">
            <div class="row">
                <!-- <div id="const" class="col-xs-12">
                    SITE UNDER CONSTRUCTION
                <div class="progress">
               <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
                10%
               </div>
               </div>
                </div> -->
                <div class="sections">
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-university" aria-hidden="true"></i></a></div>
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></div>
                </div>
            </div>

            <div class="row">
                <div class="social">
                <div class="col-xs-2"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></div>
                </div>
            </div>
        </div>
    </div>

link for reference

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download