CODEWITHSUNDEEP
javascripthtmlcssnavbarresponsive
zalandemeter12
zalandemeter12

Reputation: 3

Navbar items disappear after clicking the hamburger icon and then resizing the browser

I appreciate all the help I can get :)

I'm trying to create a responsive navbar, which is editable for later usage. But it seems like I have an issue with the hamburger icon. If I resize the web browser the content gets switched for the mobile friendly hamburger icon and the menu appears, and vice versa.

But when I click the hamburger icon in the mobile view and then click it again to make the menu disappear and after this resizing it to desktop view the menu goes missing.

How can I make it work?

HTML:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Framework</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".navbar-hamburger").click(function(){
                $(".navbar-item").toggle();
            });
        });
    </script>
</head>

<body class="bg-grey-light">
    <nav class="navbar bg-white">
        <div class="navbar-brand">Company Name</div>
        <div class="navbar-item">
            <a href="index.html" class="">Home</a>
        </div>
        <div class="navbar-item">
            <a href="#">About</a>
        </div>
        <div class="navbar-item">
            <a href="#">Shop</a>
        </div>
        <div class="navbar-item">
            <a href="#">Forum</a>
        </div>
        <div class="navbar-hamburger">
            <i class="fa fa-chevron-down"></i>
        </div>
    </nav>    
</body>

CSS:

.navbar{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.navbar-brand{
    flex-grow: 100;
    padding: 0.75rem;
    padding-left: 1.5rem;
}

.navbar-item{
    flex-grow: 0;
    padding: 0.75rem;
    display: block;
}

.navbar-item:hover {
    background-color: var(--color-grey-lighter);
}

.navbar-hamburger{
    display: none;
    position: absolute;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
    right: 0;
}

.navbar-hamburger-active{
    display: none;
    position: absolute;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
    right: 0;
}

@media only screen and (max-width: 720px) {
    .navbar{
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-brand{
        width: 100%;
    }

    .navbar-item{
        width: 100%;
        padding-left: 1.5rem;
        display: none;
    }

    .navbar-hamburger{
        display: block;
    }
}

Brief DEMO: https://codepen.io/zalandemeter12/pen/dQayMP

Regards

Upvotes: 0

Views: 148

Answers (1)

Emna Habibi
Emna Habibi

Reputation: 126

You can use toggleClass instead and hide navbar-item only on little screens

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.navbar{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.navbar-brand{
    flex-grow: 100;
    padding: 0.75rem;
    padding-left: 1.5rem;
}

.navbar-item{
    flex-grow: 0;
    padding: 0.75rem;
    display: block;
}

.navbar-item:hover {
    background-color: var(--color-grey-lighter);
}

.navbar-hamburger{
    display: none;
    position: absolute;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
    right: 0;
}

.navbar-hamburger-active{
    display: none;
    position: absolute;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
    right: 0;
}

@media only screen and (max-width: 720px) {
    .navbar{
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-brand{
        width: 100%;
    }

    .navbar-item{
        width: 100%;
        padding-left: 1.5rem;
        display: none;
    }

    .navbar-hamburger{
        display: block;
    }
@media only screen and (max-width: 768px) { 
    .navbar-item{
      display:none;
     }
    .navbar-item.opened{
      display:block;
    }
}    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".navbar-hamburger").click(function(){
                $(".navbar-item").toggleClass('opened');
            });
        });
</script>
<nav class="navbar bg-wihite">
        <div class="navbar-brand">Company Name</div>
        <div class="navbar-item">
            <a href="index.html" class="">Home</a>
        </div>
        <div class="navbar-item">
            <a href="#">About</a>
        </div>
        <div class="navbar-item">
            <a href="#">Shop</a>
        </div>
        <div class="navbar-item">
            <a href="#">Forum</a>
        </div>
        <div class="navbar-hamburger">
            <i class="fa fa-chevron-down"></i>
        </div>
    </nav>

Upvotes: 2

Related Questions