CODEWITHSUNDEEP
htmlcss
baswijdenesdotcom
baswijdenesdotcom

Reputation: 315

Why is my hamburger menu not staying right when clicked?

See my website: https://www.baswijdenes.com/powershell/ I cannot get my hamburger menu to stay right when opened and the menu to the left of the hamburger menu.

I feel like im overseeing something, but I don't know what. Could someone take a quick look into this and see what I'm doing wrong?

I dont use any media screens or anything. I want the hamburger menu to be used on every device.

The css:

/* test menu */

.menu-main-menu-container {float:right;}

    .menu {

        display:inline-block;
float:right;


    }

    .menu ul.menu {
        display:none;
float:right;
    }

    .menu ul {

        float:right;
        top:120%;
        z-index:10000;
    }



    .menu li {

        float:left;
        display:block;
    }

    .menu a {
        display:block;
    }

    .toggle-nav {
        padding:20px;
        float:right;
        display:inline-block;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:3px;
        background-color: #0078d7;  
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#ffffff;
        font-size:20px;
        transition:color linear 0.15s;
    }

    .toggle-nav:hover, .toggle-nav.menu {
        text-decoration:none;
        color:#ffffff;
        background-color: #229DFC;
        float:right;
    }

The HTML:

<nav class="menu">

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

     <a class="toggle-nav" href="#">&#9776;</a>
</nav>

The CSS:

<script>
jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery(this).toggleClass('menu');
        jQuery('.menu ul').toggleClass('menu');

        e.preventDefault();
    });
});
</script>

Upvotes: 0

Views: 79

Answers (2)

Prince Sodhi
Prince Sodhi

Reputation: 2955

you also use it 

toggle-nav:hover, .toggle-nav {       
    width: 20px;
    height: 30px;
}

nav.menu {
    display: flex;
}

Upvotes: 0

Tsurule Vol
Tsurule Vol

Reputation: 482

just change this like so:

.menu-main-menu-container {
    float: left;
}

And style the menu then as you wish :)

Upvotes: 1

Related Questions