The middle toggle line stubbornly refuses to properly disappear

I'm facing an issue with the toggle button on my practice site. When clicked, it undergoes a transition and displays a cross or X symbol. I've used CSS to create a cross shape by hiding the middle line. However, after the transition, the middle line is not properly hidden and ends up resembling an asterisk (*).

I attempted using visibility: none to hide the middle line, but it ended up making the entire toggle button invisible.

Another approach I tried was changing the background color of the middle line to match the surrounding background color, but this also did not resolve the issue.

jqueryhtmlcss

Answer №1

consider the possibility of integrating CSS with the active class for enhanced effects.

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.overlay').toggleClass('active');
    $('.menu').toggleClass('active');
  });
});


$(window).on('scroll', function() {
  if ($(window).scrollTop() == 0) {
    $('nav').removeClass('small-menu');
    $('.navigation .main-menu .toggle').removeClass('togglesmall');
  } else {
    $('nav').addClass('small-menu');
    $('.navigation .main-menu .toggle').addClass('togglesmall');
  }
});
body{background: #000;}
header nav.small-menu {
  background: #000;
  width: 100%;
  height: 5rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  opacity: .9;
  z-index: 2;
}

header nav.small-menu .logo {
  position: absolute;
  top: .9rem;
  left: 2rem;
  height: 80px;
  width: 100px;
  transition: .8s;
  z-index: 2;
}

header .navigation .toggle {
  background: #fff;
  position: absolute;
  width: 35px;
  height: 4px;
  top: 3rem;
  left: 73rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: all .5s ease-out;
  cursor: pointer;
  z-index: 1;
}

header .navigation .togglesmall {
  width: 35px;
  height: 4px;
  top: 2.5rem;
  left: 73rem;
  background: var(--primary-blue);
}

header .navigation .togglesmall::before,
header .navigation .togglesmall::after {
  background: var(--primary-blue);
}

header .navigation .toggle::before,
header .navigation .toggle::after {
  position: absolute;
  content: '';
  background: #fff;
  width: 35px;
  height: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: all .5s ease-out;
  cursor: pointer;
}

header .navigation .toggle::before {
  top: -14px;
}

header .navigation .toggle::after {
  top: 14px;
}

header .navigation .toggle.active::before {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  top: 0;
  transform: rotate(45deg);
  z-index: 1;
}

header .navigation .toggle.active::after {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  top: 0;
  transform: rotate(135deg);
  z-index: 1;
}

header .navigation .overlay {
  background: #fff;
  position: fixed;
  top: 28px;
  right: 53px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all .5s ease-out;
  visibility: hidden;
  cursor: pointer;
}

header .navigation .overlay.active {
  transform: scale(100, 100);
  visibility: visible;
  cursor: pointer;
}

header .navigation .menu {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: auto;
  visibility: hidden;
}

header .navigation .menu.active {
  visibility: visible;
}

header .navigation .toggle.active {
  box-shadow: none;
  background: transparent;
}

 .overlay.active { opacity: .7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav class="navigation">
    <div class="logo">

    </div>
    <div class="main-menu">
      <div class="toggle"></div>
      <div class="overlay"></div>
      <div class="menu">

      </div>
    </div>
  </nav>
</header>

Answer №2

To activate the menu, simply delete the box-shadow attribute from the CSS class header .navigation .toggle.

After clicking on the menu, examine the element and deselect the box-shadow property to view the outcome.

Answer №3

$(document).ready(function(){
    $('.toggle').click(function(){
        $('.toggle').toggleClass('active');
        $('.overlay').toggleClass('active');
        $('.menu').toggleClass('active');
    });
});


$(window).on('scroll',function(){
    if ($(window).scrollTop() == 0){
        $('nav').removeClass('small-menu');
        $('.navigation .main-menu .toggle').removeClass('togglesmall');
    }
    else{
        $('nav').addClass('small-menu');
        $('.navigation .main-menu .toggle').addClass('togglesmall');
    }
}); 
header nav.small-menu{
                background: #fff;
                width: 100%;
                height: 5rem;
                box-shadow: 0 0 5px rgba(0, 0, 0, .3);
                opacity: .9;
                z-index: 2;
                }

                header nav.small-menu .logo{
                position: absolute;
                top: .9rem;
                left: 2rem;
                height: 80px;
                width: 100px;
                transition: .8s;
                z-index: 2;
                }

                header .navigation .toggle{
                background: var(--primary-white);
                position: absolute;
                width: 35px;
                height: 4px;
                top: 3rem;
                left: 73rem;
                box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
                transition: all .5s ease-out;
                cursor: pointer;
                z-index: 1;
                transition: 0.3s linear;
                }

                header .navigation .toggle.active{
                box-shadow: none;
                transition: 0.3s linear;
                }    

                header .navigation .togglesmall{
                width: 35px;
                height: 4px;
                top: 2.5rem;
                left: 73rem;
                background: var(--primary-blue);
                }

                header .navigation .togglesmall::before,
                header .navigation .togglesmall::after{
                background: var(--primary-blue);
                }

                header .navigation .toggle::before,
                header .navigation .toggle::after{
                position: absolute;
                content: '';
                background: var(--primary-white);
                width: 35px;
                height: 4px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
                transition: all .5s ease-out;
                cursor: pointer;
                }

                header .navigation .toggle::before{
                top: -14px;
                }

                header .navigation .toggle::after{
                top: 14px;
                }

                header .navigation .toggle.active::before{
                background: var(--primary-white);
                box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
                top: 0;
                transform: rotate(45deg);
                z-index: 1;
                }

                header .navigation .toggle.active::after{
                background: var(--primary-white);
                box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
                top: 0;
                transform: rotate(135deg);
                z-index: 1;
                }

                header .navigation .overlay{
                background: var(--primary-blue);
                position: fixed;
                top: 28px;
                right: 53px;
                width: 45px;
                height: 45px;
                border-radius: 50%;
                transition: all .5s ease-out;
                opacity: 0.7;
                visibility: hidden;
                cursor: pointer;
                }

                header .navigation .overlay.active{
                transform: scale(100, 100);
                visibility: visible;
                cursor: pointer;
                }

                header .navigation .menu{
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                overflow: auto;
                visibility: hidden;
                }

                header .navigation .menu.active{
                visibility: visible;
                }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
        <nav class="navigation">
            <div class="logo">

            </div>
            <div class="main-menu">
                <div class="toggle"></div>
                <div class="overlay"></div>
                <div class="menu">

                </div>
            </div>
        </nav>
    </header>

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

yet another dilemma with CSS height set to 100%

UPDATE: I believe there was an excess of information. Let me simplify my question: How can I adjust the height of #middle to be 100% of the remaining space in the example below: <body> <div id="big"> <div id="header"></div ...

htmlcssheight

Modify x and y axes in highcharts for stacked columns

Can anyone assist me in finding charts similar to the one shown below? I am interested in utilizing the stacked column charts provided by the highcharts library. However, I need to modify the presentation of the data values as demonstrated in the image. I ...

javascriptjquerygraphchartshighcharts

Avoid triggering jQuery "change" event manually in order to prevent unintentional execution when done programm

In my invoicing system, I have implemented a feature where users can select an item using jquery select 2. Upon selection, the base price and other details are automatically filled in the form. Users also have the option to manually change this price befor ...

javascriptphpjquerymysqlajax

Strategies for Connecting CSS, JavaScript, and Image Files in Django

Being new to Django 1.9.5 and working on Windows, I am facing difficulty in linking my CSS, images, and JS files to the Django template. This is how my project structure looks like: Here is my settings page: BASE_DIR = os.path.dirname(os.path.dirn ...

pythoncssdjango

Exploring jQuery Sortable: Navigating Drag-and-Drop Functionality with Cl

Currently, I am working on developing a menu generator tool, similar to arranging widgets in WordPress but designed specifically for creating menus on websites. I have attempted to build this tool using jQuery and Sortable, along with experimenting with Dr ...

javascriptjquerydrag-and-dropjquery-ui-sortable

I am unable to save only one specific value, as the entire database is being saved instead

When I select a project from the drop-down list, it saves all the data from the selection. Please refer to the image below. function sample($con){ $select = "SELECT * FROM project_tbl"; $select_result = mysqli_query($con,$select); if (mysqli_n ...

javascriptphpjqueryajax

Disabling caching in bootstrap tabs for loading ajax content

My goal is to make bootstrap tabs load content through ajax queries. While this process is straightforward with Jquery tabs, which default to loading content via ajax query, it seems to be a different case for bootstrap. As such, I have come across the fo ...

javascriptjqueryajaxtwitter-bootstrap

A fresh inquiry: jQuery custom plugin callback

Many individuals inquire about plug-ins and callbacks, and after reading numerous posts on the topic, I have managed to create a simple hide/show accordion type plugin for FAQs. While I am pleased with its functionality, as I continue to learn, some aspe ...

javascriptjquerypluginscallback

Using jQuery to apply a background image in CSS

Currently, I am attempting to utilize jQuery to set a background image for an HTML element. <div class="rmz-srchbg"> <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox"> <input type="submit" value="& ...

javascriptjqueryhtmlcss

Height problem with Semantic UI cards in Chrome on Windows

Encountering an issue specific to Chrome on Windows where the height of my .card elements is not displaying correctly. The height appears to be either too much or too little, causing the problem shown in the screenshot below. This issue seems to be isolate ...

cssgoogle-chromeflexboxsemantic-ui

Ways to verify the existence of empty arrays in an Object using underscore.js or jQuery

Is there a more efficient method to determine whether an object contains empty arrays (0-*) aside from the following approach: emptyArr: function() { var obj = getObj(); return obj.abc.length == 0 || obj.def.length == 0 || obj.ghi.length = ...

javascriptjqueryarraysunderscore.js

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

javascriptjqueryhtmlcss

What causes the inability to separate the span size from the parent div when enlarging the span width?

Check out this Relevant Fiddle: https://jsfiddle.net/promexj1/1/ I'm working on adjusting the widths of two child spans within a parent div to be slightly smaller than the parent itself (due to starting translation 10px to the right for one of the sp ...

htmlcss

a guide on configuring a default input value from a database in a React component

In my current project, I have an input field with the type of "checkout" and I am looking to utilize Firestore to retrieve a default value. Once I obtain this value, I plan to store it in the state so that it can be modified and updated as needed. Here i ...

javascripthtmlreactjsfirebasegoogle-cloud-firestore

tips for transferring each div to a different location

I am looking to rearrange the div.my-div from containers into sections. How can I achieve this for each section? <section> <div class="container">container <div class="my-div">my div</div> </div> </section&g ...

jqueryhtml

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

Failed PHP response when jQuery was called

I'm working on a project that involves two files: one PHP and one HTML. The HTML file acts as the user interface where users input their queries, while the PHP file handles the processing and events before returning the output back to the HTML file. I ...

javascriptphpjqueryhtmlajax

The footer is not displaying at the bottom of the page in Firefox

While the footer design is functioning well in both Chrome and IE, it seems to be encountering issues with Firefox. div.footer{ width: 100%; padding: 0px; margin-top: 200px; font-size: 0.6em; line-height: 1.2em; clear: both; po ...

htmlcssfirefox

What is the best way to prevent elements in the split function from being stored in an array?

Currently, I am attempting to utilize the split() method in Javascript to split elements into an array, a result that I do not desire. My goal is for the elements to be stored as values within an object. var string = "as1234,as5678,as6789"; var result = ...

javascriptjqueryarrayssplit

Automatically updating d3.js data in real-time using jQuery's setInterval function with support for JSON, XML, text, and other data

Is there anyone who can provide guidance on how to use jQuery's get method (for json, txt, xml, or any other format) in conjunction with setInterval from d3.js? I'm looking to update my d3 bar chart every N seconds. Alternatively, is there an exi ...

jqueryd3.js