Why won't the hamburger menu spin around like it's supposed to?

After struggling for four days, I'm having trouble getting this menu to work properly. Any help would be greatly appreciated.

When I try clicking on the hamburger menu, it doesn't rotate or do anything at all.

The most puzzling part is...

On my local Xampp server, the hamburger menu fails to rotate as expected.

However, in the codepen test block, the hamburger menu does rotate.

The browsers I tested this behavior on include: Chrome - Firefox - Brave

You can find the online version on codepen here:

(https://codepen.io/paulodoporto/pen/WNyOEVR)

Could you please point out what I might be doing wrong?

<!DOCTYPE html>
<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>Mr.Buildbox</title>
</head>
<body>

<header class="sticky-top">
    <div class="logo">
        <a href="#"><img src="https://localhost/mrbuildbox/buildboxdesafio/assets/images/catdog2.png" alt="" class="responsive-image"></a>
    </div>
    
    <div class="container">

       <input type="checkbox" class="toggle-menu"& gt;
        <div class="hamburger"></div>
        
        <div class="menu-top-menu-container">
            <ul id="menu-top-menu" class="navigation-class">
                <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-15"><a href="https://localhost/mrbuildbox/" aria-current="page">IPB Instituto</a></li>
                <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">& lt;a href="https://localhost/mrbuildbox/create-page-test/">quem somos</a></li>
                <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="https://localhost/mrbuildbox/faleconosco/">fale conosco</ a></li>
                <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="https://localhost/mrbuildbox/category/blog/">blog</a></li>
            </ul>
        </div>
     
    </div>   
</header>

{And this is the CSS file}

/* CSS styles go here */
htmlcssresponsive-designrotationhamburger-menu

Answer №1

There seems to be an issue with the top position of the .toggle-menu class. It appears that you have not specified a top position for it, causing a mismatch with the icons. To fix this problem, simply update the top position like so: top: 0;. This should resolve the issue. For more information, you can check out this link: https://codepen.io/salmanaabir/pen/QWxgOwV

@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700);

/* CSS styles here */

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

Achieving this result in HTML using a jQuery accordion component

Hey there, I'm looking to create a full-height accordion that extends from the bottom to the top of the page, similar to what you see on this website: . I also have a footer positioned below the accordion. The content should load when the page loads ...

javascriptjqueryhtmlcssjquery-ui-accordion

Problem arises with background image scaling and adaptability

Utilizing Magnific Popup for presenting two sections of content side by side has been a bit challenging. The left section features a div with a background image that varies in size, causing issues with responsive styling to fit the containers properly. Cu ...

htmlcssresponsive-designmagnific-popup

Utilize a drop-down selector in JavaScript to search and refine the results

Looking for a way to enhance your product search form? Consider adding an option to select a specific shop from the dropdown menu. This will allow users to search for products within a particular store if desired. <form action="#" method="get"> &l ...

javascripthtml

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Switch your attention to the following input text using AngularJS

In my controller, I have an object variable called `myObject` with 3 input text fields in the user interface. I am looking for a way to automatically shift the focus to the next input field once the current one reaches its maximum length. var myObject = ...

javascriptangularjshtml

What is the best way to create space between these form boxes for padding?

I am struggling to align two form boxes on the same line and another one below them. Despite my attempts with divs, I cannot seem to separate these two fields. I even tried inserting the   character between them, but to no avail. Below is the snippet ...

htmlcss

Ensure that only one button can be selected at a time for non-radio button elements in the

This is the code snippet I am working with $(document).ready(function(){ $("a.btn1").click(function() { $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down"); }); $("a.btn2").click(function(){ $(this).fi ...

javascripthtmlcss

the inline-block display property is not initializing properly

I am facing an issue with positioning two divs next to each other. Initially, using the display: inline-block; property for both divs worked fine. However, as soon as I added a <p> tag into one of the divs, its placement got messed up. Here is the cu ...

htmlcssdisplay

Integrate HTML forms seamlessly with Bootstrap

Currently, I am facing an issue while trying to align 2 forms side by side using the Bootstrap grid system. Despite following the documentation exactly, it doesn't seem to work and I can't figure out why. Here is the HTML code I'm using: ...

htmlcssbootstrap-4

When the form is submitted, delete the file and its corresponding record

Currently, I have a form that deletes a record from my MySQL database. The database stores the image/file name. I am looking to enhance the statement so that it also removes the file in the website directory with the corresponding image/file name. If bot ...

phphtmlmysqldelete-rowdelete-file

How to make browsers refresh cached images

.button { background: url(../Images/button.png); } Issue: To improve performance, static content on the website is cached with expiration headers. However, when an image changes, users must manually refresh their browser cache (Ctrl+F5 in IE). ...

csscaching

What steps are needed to enable the keyboard on a Otree application for mobile devices?

I previously utilized an Implicit Association Task (IAT) in an experiment conducted on computers. However, I now need to adapt this IAT for use on tablets or mobile devices. Here is how the IAT appears on a cellular device: https://i.stack.imgur.com/kNwo ...

javascriptpythonhtmlotree

Specification for dynamically changing CSS in Bootstrap tooltips

The default tooltip template in Bootstrap is a black box with white text. However, it is possible to modify the .tooltip css class to have a white background instead: .tooltip{position:absolute;display:none;color:#333;text-align:left;font-size:0.9em;width ...

javascriptcssangularjstwitter-bootstrap

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

javascripthtmlvue.jsbootstrap-4

The comparison between dynamically adding elements through Javascript and hiding them using CSS

I am contemplating the advantages and disadvantages of adding elements to a page and setting display:none versus creating a function that dynamically generates the elements and appends them where needed. In my current situation, I am implementing a reply ...

javascripthtmlcss

Creating an array object in JavaScript is a straightforward process that involves using the array

Looking to achieve the following object list structure: myObj = {"foo":[1,2,3,4], "bar":[3,5,7,8]} Initial attempt was unsuccessful: var myObj = new Object(); myObj["foo"].push(1) myObj["foo"].push(2) #...etc Seeking guidance on the correct m ...

javascripthtml

I would like to split the window into four columns and populate each one with images

I've been struggling to create 4 columns in my design, but I just can't seem to make it work. I've tried setting the height to 100% in each div, but it didn't produce the desired result. I was able to achieve it with colors, but not wit ...

htmlcssbootstrap-5

Photos on Display are Misaligned

I'm currently in the process of developing a responsive photo gallery based on this tutorial. Within my project, there exists a component known as MemoryList which is defined as shown below: import React from 'react'; import _ from 'lo ...

cssreactjs

I am currently in the process of transitioning a Gatsby project from CSS to SCSS, and running into obstacles with the

Currently, I am in the process of converting a Gatsby starter project that utilizes Lost grid from CSS to SCSS for better organization and efficiency. The original starter project can be found here: https://github.com/wpioneer/gatsby-starter-lumen The ma ...

javascriptcssnode.jspostcssgatsby