How do I move my hamburger in css and still have it functional?-CodePudding

So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.

As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.

This is my css code:

@font-face {
    font-family: 'Poppins';
    src: url(Fonts/Poppins-Regular.ttf
}

@font-face {
    font-family: 'Comfortaa';
    src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'DancingScript';
    src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}

* {
    padding: 0;
    margin: 0;
    color: #A6808C;
    box-sizing: border-box;
}

body {
    background-color: #565264;
    font-family: Poppins;
}

html {
    overflow: scroll;
    overflow-y: hidden;
} 

::-webkit-scrollbar {
    width: 0%;
} 

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 10px 90px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 0px solid #fff;
    z-index: 9999
}


nav .logo {
    padding: -22px 20px;
    height: 50px;
    float: left;
}

nav ul {
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li a {
    line-height: 60px;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 25px;
}

nav ul li a:hover {
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
}

.text {
    font-size: 2rem;
    padding: 2rem;
    background-color: #565264;
    color: whitesmoke;
}

.title {
    font-size: 7rem;
    color: whitesmoke;
    text-shadow: 0 0 5px black;
}


.background {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
    transform: translateZ(-10px) scale(3);
    background-repeat: no-repeat;
}

header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}


.wrapper {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 10px;
}

.hamburger {
    position: relative;
    width: 30px;
    height: 4px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    z-index: 2;
    transition: 0.3s;
}

.hamburger:before, .hamburger:after {
    content: "";
    position: absolute;
    height: 4px;
    right: 0;
    background: #fff;
    border-radius: 10px;
    transition: 0.3s;

}

.hamburger:before {
    top: -10px;
    width: 20px;
}

.hamburger:after {
    top: 10px;
    width: 20px;
}

.toggle-menu {
    position: absolute;
    width: 30px;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
}

.hamburger, .toggle-menu {
    display: none;
}

.navigation input:checked ~ .hamburger {
    background: transparent;
}

.navigation input:checked ~ .hamburger::before {
   top: 0;
   transform: rotate(-45deg);
   width: 30px;
}

.navigation input:checked ~ .hamburger::after {
    top: 0;
    transform: rotate(45deg);
    width: 30px;
 }

 .navigation input:checked ~ .menu {
    right: 0;
    box-shadow: -20px 0 40px rgba(0,0,0,0.3);
 }

 @media screen and (max-width: 1062px) {
    .hamburger, .toggle-menu {
        display: block;
    }

    .header {
        padding: 10px 20px;
    }

    nav ul {
        justify-content: start;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        right: -300px;
        background-color: #565264;
        width: 300px;
        height: 100%;
        padding-top: 65px;
    }

    .menu li {
        width: 100%;
    }

    .menu li a, .menu li a:hover {
       padding: 30px; 
       font-size: 24px;
       box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
    }
 }

This is my HTML code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="veiwport" content="width=device-width, initalscale=1.0">
    <Title>Test</Title>
    <link rel="stylesheet" href="Style.css">
</head>

<body>

    <nav>
        <div >
            <a href="index.html">
                <img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
            </a>
        </div>

        <div >
        <input type="checkbox" >
        <div ></div>

        <ul >
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Feedback</a></li>
        </ul>
    </div>    
    </nav>



    <div >
        <header>
            <img src="Pictures/LakeandMoutains.jpg" >
            <h1 >Welcome!</h1>
        </header>

    

    <section >
        <h3>Essay on Mountains</h3>

</section>

        </div>
</body>
</html>

Does anyone know how to make the hamburger menu move to the right side of the screen?

CodePudding user response：

You could always use flexbox. The following lines of code will display this on the right hand side:-

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.navigation {
    margin-left: auto;
}

CodePudding user response：

Update your .hamburger, .toggle-menu styles like this

.hamburger, .toggle-menu {
    display: block;
    position: absolute;
    right: 30px;
}

Update the value of right according to your need.

CodePudding user response：

Add this to your navigation class:

.navigation{
position:relative;
}

and then this to your hamburger menu to make it stick to the right.

.hamburger{
  position:relative;
  right:8%;
}

The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.

CodePudding user response：

You must understand the importance of HTML structure and positioning because this is the problem in your HTML.

To fix your problem, you need to put the burger menu and the check box in one container and then position the container.

The problem now is that you are positioning every part individually and their width and height are not properly set.

try to follow the steps I mentioned then let us know if you can do it or not.