How can I customize the color of the cross in the hamburger menu?

Seeking guidance for a technical issue I'm facing. The problem lies with the X button on the menu - although everything seems to be in order, I encounter an error when attempting to change its color to black. If anyone has insight or advice on how I can successfully achieve this, it would be greatly appreciated. Here's the code snippet

<button class="js-menu menu" type="button">
    <span class="bar"></span>
</button>

<nav>
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>       
    </ul>
</nav>
javascriptjqueryhtmlcssmenu

Answer №1

Modify the background styling for the elements with classes .active:after and .active:before

.active & {
  background: none;
  &:after,
  &:before{
     background: red;
  }

Check it out on CodePen

Answer №2

To modify the color, utilize the .active class

.active & {
    background: none;
    &:before,
    &:after {
       top: 0;
       background:red
    }
}

Answer №3

Enhance the appearance of your CSS by including a background color to the pseudo selectors. Implement the following snippet into your code:

.active .bar::before, .active .bar::after {
    top: 0;
    background: #000;
}

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

PHP Login Script that features Ajax loading of the Header directly on the page itself

I am encountering a challenge with my PHP login script and AJAX implementation. The PHP script successfully redirects the user to a page upon successful login, but when using the AJAX request, the header location loads inside the $('.logresult') ...

phpjqueryajaxsqliteforms

Issues with AJAX functionality in select fields - LATEST UPDATE

I have created a form with two select fields. The first field is populated with the parents of a custom taxonomy, and the second field is populated with the children of each parent. I used AJAX to accomplish this, but it doesn't seem to be working pro ...

javascriptphpjqueryajaxwordpress

issue with JavaScript canvas

My task is to develop a Blackberry application, but I have limited knowledge in Java. Since the application requires drawing capabilities, I decided to use HTML5 and JavaScript instead. I started reading some JavaScript tutorials to prepare for this proj ...

javascripthtmlcanvas

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

<mat-slide-toggle>Slide Me!</mat-slide-toggle> https://i.stack.imgur.com/p1hzD.png https://i.stack.imgur.com/aCzs1.png Is it possible to customize the toggle-thumb-icon to increase its length and position it at the end of the bar? ...

cssangularsassangular-material2angular8

What is the best way to trigger a download of an external image (AWS signed URL) when a button is clicked?

Currently, I am facing a challenge attempting to download an image from an s3 Presigned URL upon clicking a button in Nextjs (client-side). To provide some context: On the backend, I'm utilizing Golang and on the front end, it's the Nextjs Reac ...

htmlreactjsamazon-web-servicesgonext.js

Troubleshooting issues with Jquery fadeIn and fadeOut - tips for implementing fadein animation using addclass and mouseover

My concept involves a shop menu displayed as a list: <li class="shop-menu"><a href="{{url('shop')}}">shop</a></li> When the shop-menu is hovered over (using a mouseover jquery function), I aim to make a div named shop-m ...

htmljquerycssanimation

Start a new typescript project from scratch

Seeking assistance in setting up a blank TypeScript project with a package.json, TypeScript and HTML file. I am looking for something akin to the Stackblitz blank-typescript project. If anyone could provide me with a step-by-step guide on how to create su ...

node.jshtmltypescriptnpm

Tips for adjusting the angle in SVG shapes

I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance? <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <g filter="url(#filter0_b_1_2556)"&g ...

javascripthtmlcsstypescriptsvg

When implementing protractor spyOn() with jQuery's ajax() function, an error is triggered stating 'ajax() method is non-existent'

I am currently testing the functionality of using AJAX to submit a form. Below is the Protractor code for the test: describe('login.php', function() { it("should use ajax on submit", function() { browser.get('/login.php'); spyOn($ ...

javascriptjqueryjasmineprotractor

Retrieve the route from a specific node in the jstree structure

Looking to retrieve the paths of selected nodes in jstree? You'll need the complete path of the nodes. I have a php file that generates the JSON, structured like this: header("Content-Type: application/json; charset=utf8"); echo json_encode(dir_to_ ...

javascriptphpjsonjstree

Cheerio uses CSS selectors to target specific image sources within the HTML document

I'm having trouble extracting a specific src attribute const img1 = selector .find("li.gallery_thumbItem.s-gallery_thumbItem:nth-child(3) span.gallery_thumbIn> img:last-child") .attr("src"); The webpage contains: https://i.sstatic.net/zeBPG ...

jquerycssnode.jsexpresscheerio

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

angularjscssangular-material

Tips for eliminating wireframe diagonals from your design

After developing a custom CAD software exporter to transfer geometry data to the ThreeJS editor, I successfully created a loader to load the geometry. However, I encountered an issue when viewing the wireframe in ThreeJS - where triangles from each vertex ...

javascriptmath3dthree.js

Internet Explorer having trouble with onload function

Here is a snippet of code that I am working with: <html> <head> <style> #visibilitycontent{ visibility:hidden; } </style> </head> <body onload="visibilitychange()"> <div id="header"> This is the h ...

jqueryhtml

What steps can I take to create a textbox that expands as more text is

Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...

javascripthtmlcss

Encountering a 500 Error When Sending Data to ASMX Web Service Using jQuery: "Invalid Response Format Error 500"

Recently, I created a webservice located at . This webservice is practically identical to a script I quickly put together using jQuery to send mail via POST method. The script is quite straightforward: function ContactSubmit() { var Name = $('input: ...

jqueryajaxpost

Display a subset of data within a nested partial view by using a custom command in a Kendo

I am currently working on a project where I have a partial view displayed within jquery tabs on my MVC parent view. <div id="tabs"> <ul> <li><a href="#CompanyDetails">Company Details</a></li> <li><a hre ...

jqueryasp.net-mvckendo-gridpartial-views

What is the best way to link a multi-select element with an array of objects?

How can I bind a select element with a model to get/set the value and populate it from a list using angular 1? Currently, I'm able to bind it from UI to model, but not vice versa. What am I doing wrong? HTML: <div ng-controller="MyCtrl"> ...

javascriptangularjs

Unable to view Ajax requests using Firebug when the header has been altered

Currently, I am making an ajax call using jQuery's library to interact with an API. This particular API demands a username and password encoded to base64 added to the header. Here is a simple example of how it is done: $.ajax({ type: "GET", ...

jqueryajaxhttp-headersbasic-authentication

Sending data from events to a textbox and a div

I've set an onClick event for a textbox. Is there a way to have the click event of a different div also execute when clicking on the textbox, even though they are not nested and in separate parts of the document? Any help with this in Javascript would ...

javascript