PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 8, 2022

[FIXED] why are the bars on the left instead of the right and why does the small screen version need to slide instead of using the function to see the menu?

 November 08, 2022     css, firefox, html, javascript, menu     No comments   

Issue

Hi guys I'm trying to create a mobile friendly header menu with the bars on the right side of the screen. A Javascript for clicking the cross and the bars for opening the menu on the right. Except I have a

  1. the bars are on the left and should be on the right

Can someone help me and give me some insights?

this is how it look in small screen

here's the html code I have

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
    
</head>
<body>
    <section class="header">
        <nav>
            
            <div class="nav-links" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="courses.html">Courses</a></li>
                    <li><a href="endangered.html">Endangered</a> </li>
                                
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu"></i>
        </nav>

    </section>

    <script src="javascript.js"></script>
    
</body>
</html>

here is the css code

*{
    margin: 0;
    padding: 0;
    font-family: "poppins", sans-serif;
    
}

.header{ 
    height: 100vh;
    width: 100%;
    
}

nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

.nav-links{
    flex: 1;
    text-align: center;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    text-decoration: none;
    color: #5ab61d;
    
    font-size: 20px;
}

.nav-links ul li a::after{
    content: '';
    background: #0ace83;
    width: 0;
    height: 2px;
    margin: auto;
    display: block;
    left: 50%;
    transition: all 0.5s;
}

.nav-links li a:hover::after{
    width: 100%;
}

nav .fa{
    display: none;
}

@media(max-width: 700px){
    .nav-links ul li{
        display: block;

    }
    .nav-links{
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #000;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

    .nav-links ul{
        padding: 30px;
    }
}

and here is the javascript

/* Toggle between showing and hiding the navigation menu links when the user clicks */
    var navLinks = document.getElementById("navLinks")
    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

I have been trying to figure out what's wrong for hours help would be much appreciated!


Solution

Replace the event element in your icon oneclick="showMenu" by onclick="showMenu".

For the burger position you can

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: end;
    align-items: center;
}

Should work because your nav panel is on absolute position, but maibe it's better isolate your icon from nav element.



Answered By - Mino mnz
Answer Checked By - Timothy Miller (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing