Struggling to properly set up the hamburger and close icons

When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa-xmark element when the menu is open (right: 0px;). Despite trying various code variations, I have been unable to achieve this.

@media (max-width: 700px) {
  .nav_links ul li {
    display: block;
  }
  nav .fa-bars {
    display: block;
    color: black;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
  }
  .nav_links {
    position: absolute;
    background: lightpink;
    height: 100vh;
    width: 200px;
    top: 0;
    right: 0px;
    text-align: left;
    z-index: 2;
  }
  nav .fa-xmark {
    display: block;
    color: black;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
}
<nav class="nav_links">
  <i class="fa-solid fa-xmark"></i>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <a class="button1" href="#"><button>My Instagram</button></a>

  </ul>
  <i class="fa-solid fa-bars"></i>
</nav>

htmlcss

Answer №1

<!DOCTYPE html>
<html>
  <head>
    <title>Custom HTML Template</title>
    <meta charset="UTF-8" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <style>
      @media (max-width: 700px) {
          
        body {
            overflow-x: hidden;
        }
        
        .nav-container {
          height: 300px;
          position: absolute;
          right: 0;
          top: 0;
        }

        .nav-container i {
          float: right;
          margin: 10px;
          cursor: pointer;
        }

        .nav-links {
          position: absolute;
          list-style: none;
          top: 30px;
          right: 0;
          width: 100px;
          padding: 20px ;
          background: pink;
          transition: 0.3s linear;
        }

        .nav-links.active {
          right: -140px;
        }

        .nav-links li {
          margin: 20px;
        }

        .nav-links li a {
          color: black;
          text-decoration: none;
        }
      }
    </style>
  </head>

  <body>
    <nav class="nav-container">
      <i onclick="toggleMenu()" class="fas fa-bars"></i>

      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Page</a></li>
        <a class="button1" href="#"><button>My Instagram</button></a>
      </ul>
    </nav>

    <script>
      const btn = document.querySelector(".fas");
      const navLinks = document.querySelector(".nav-links");

      function toggleMenu() {
        navLinks.classList.toggle("active");
      }
    </script>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

javascripthtml

A hyperlink unveils a visual and conceals its own presence

I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...

javascripthtmlvisibility

Seeking guidance on utilizing JavaScript for implementing an onclick event

I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...

javascriptjqueryhtmlgoogle-analytics

Arrange the input fields on a single line in Rails for a clean and organized layout

Below is a Rails code snippet for input fields. Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%> <br/> Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%> ...

cssruby-on-rails

I am seeking for the HTML table to display the outcome depicted in the image

My goal is to achieve the design shown in the image below with my code, but unfortunately it's not giving me the desired result. <form> <table> <tr> <td><label for="Uname">User Name:&l ...

html

A newline within the source code that does not display as a space when rendered

Written in Chinese, I have a lengthy paragraph that lacks spaces as the language's punctuation automatically creates spacing. The issue arises when inputting this paragraph into VSCode - there's no seamless way to incorporate line breaks in the s ...

htmlcss

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

phphtmlclient-serversql-update

Modify HTML text using conditional CSS without JavaScript

Apologies for asking such a beginner question, but I've searched high and low for a similar post, to no avail. Here's my query: I have a paragraph text in my HTML code that I want to automatically replace with new text when I click a specific B ...

javascriptcssreplaceonclick

Ways to display title attributes when focused using jQuery?

Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely throu ...

jquerycssxhtmlaccessibility

Exploring the Fusion of Different Styles in Material-UI Using React

I have two different styles that I use in my code. One style is specific to certain components, while the other style is global and used across various components. For example, consider the following file tree: index.tsx -App.tsx -globalConstants.ts In ...

javascriptcssreactjsstylesmaterial-ui

Obtain the URL link from Unsplash where the picture is sourced

As I work on a website, I incorporate a link () to display a random photo. However, the photo refreshes periodically and upon loading the site, all that is visible is this default link: . Is there a method to extract the actual source like so: "". Althou ...

javascripthtmlcss

Utilizing a JavaScript variable within a jQuery function as an attribute

var image = "path.png"; Is it possible to include the 'image' variable in the jQuery function like this? $('#mapfoto').prepend('<img id="theImg" src="http://path.gr/" + image />'); ...

javascriptjqueryhtml

Aligning Text Vertically with an Image in ul/li List Items

Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while t ...

htmlcsstwitter-bootstrapvertical-alignment

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

javascriptcssheightjquery-masonry

If the ID (i.e. document.getElementById) is not found, then keep JavaScript running

I'm currently working on a JavaScript project where I need the script to gracefully handle missing div-ids and continue executing. I've looked into various solutions, but many involve either replacing the missing ID or placing information into an ...

javascripthtml

Using the DRY principle in JavaScript to handle dynamic fields

Recently delving into Javascript, I encountered a dynamic field script that allows for adding and subtracting fields with the click of a button. The functionality is effective and serves its purpose well. $(document).ready(function() { var max_fields ...

javascriptjqueryhtml

How to perfectly align a button at the center and position it in the forefront?

I'm attempting to place a button in front of my video and center it on the video. I've tried using position-relative to bring it in front and flex to center it vertically and horizontally, but it's not working as expected. The z-index is cor ...

htmlcssbootstrap-4

The fixed left div and scrollable right div are experiencing issues with their alignment

I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the t ...

javascripthtmljquerycssflexbox

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

jquerycsscss-animations

What are the reasons behind the issues encountered when enabling "Optimization" feature in Angular that affect the proper rendering of PrimeNg elements?

Angular Version : 9.x Primeng Version : 9.x We've encountered an issue with PrimeNg elements not rendering correctly in our dev/prod environments, although they work fine in the local environment. After some investigation, we found that the culprit ...

javascriptcssangulartypescriptprimeng