Implement a CSS rule when the menu is in an open state

Question

Implement a CSS rule when the menu is in an open state

Is there a way to modify the color of the hamburger icon when the menu is open?

I'm unsure on how to approach this. My assumption is that I need to check if the 'active' class is present and then apply specific CSS code.

You can view the site here:

<body>

<div class="page-transition">
  <div class="layer"></div> 
</div>

<nav class="site-navigation">
  <div class="layer"></div>
  <div class="inner">
    <ul data-splitting>
      <li><a href="/">Maison</a> <small>Retour au début</small></li>
      <li><a href="/">Le Tournoi</a> <small>A propos de l'événement</small></li>
      <li><a href="studio.html">Les Joueurs</a> <small>All About Us</small> </li>
      <li><a href="showcases.html">Le Site</a> <small>Our all projects</small> </li>
      <li><a href="blog.html">Media</a> <small>Recent posts</small> </li>
      <li><a href="contact.html">Galerie</a> <small>Say hello</small> </li>
      <li><a href="contact.html">Pro AM</a> <small>Say hello</small> </li>
      <li><a href="contact.html">Partenaires</a> <small>Say hello</small> </li>
       <li><a href="/contact">Pro AM</a> <small>Contact</small> </li>
    </ul>
  </div>
</nav>

<div class="social-media">
  <div class="layer"> </div>
  <div class="inner">
    <h5>Social Share </h5>
    <ul>
      <li><a href="index.html#"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="index.html#"><i class="fab fa-twitter"></i></a></li>
      <li><a href="index.html#"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="index.html#"><i class="fab fa-google-plus-g"></i></a></li>
      <li><a href="index.html#"><i class="fab fa-youtube"></i></a></li>
    </ul>
  </div>
</div>

<div class="all-cases">
  <div class="layer"> </div>
  <div class="inner">
    <ul>
      <li><a href="index.html#">Darkness</a></li>
      <li><a href="index.html#">Goddes</a></li>
      <li><a href="index.html#">Employee</a></li>
      <li><a href="index.html#">Berry</a></li>
      <li><a href="index.html#">Roosters</a></li>
      <li><a href="index.html#">Primero</a></li>
    </ul>
  </div>
</div>

<main>
  <aside class="left-side">
    <div class="logo"> <a href="index.html"><img src="/themes/paris-legends-championship/assets/images/branding/paris-legends-icon.png" alt="Image"></a> </div>
    <div class="hamburger" id="hamburger">
     ...
    </div>
    <div class="follow-us"> FOLLOW US </div>
    
  </aside>

  <div class="all-cases-link"> <span>Leaderboard</span> <b><i class="fa fa-table" aria-hidden="true"></i></b> </div>

Current CSS:

.hamburger__line-in::after, .hamburger__line-in::before {
    width: 60px;
    height: 2px;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-color: #fff;
}

Modified CSS:

.hamburger__line-in::after, .hamburger__line-in::before {
    width: 60px;
    height: 2px;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-color: #C1A473;
}

If anyone has a solution, it would be greatly appreciated.

javascript jquery css bootstrap-4

Answer 1

Answer №1

To modify the CSS properties, you have options such as using jQuery or pure JS. Alternatively, you can style child elements based on a toggling class with pure CSS, handling states like hover if needed:

.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
    background-color: #122e1A;
}

Testing reveals that using ::before and ::after works better:

.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
    background-color: #122e1A;
}

Edit: Opting for a dark green color instead of solid red might complement the site design more.

As for the "follow-us" link, which may be overlooked especially with Ad Block Plus, using jQuery for dynamically changing its style could be more suitable since it lacks ancestor classes that change when the menu opens. You can create a CSS class for its active state:

.follow-us.active {
    color: #C1A473;
}

Add a simple click listener to switch its active class (place it before the closing </body> tag inside a <script></script>):

$('.hamburger').click(function() {
  $('.follow-us').toggleClass('active');  
});

Answer 2

To modify the CSS properties, you have options such as using jQuery or pure JS. Alternatively, you can style child elements based on a toggling class with pure CSS, handling states like hover if needed:

.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
    background-color: #122e1A;
}

Testing reveals that using ::before and ::after works better:

.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
    background-color: #122e1A;
}

Edit: Opting for a dark green color instead of solid red might complement the site design more.

As for the "follow-us" link, which may be overlooked especially with Ad Block Plus, using jQuery for dynamically changing its style could be more suitable since it lacks ancestor classes that change when the menu opens. You can create a CSS class for its active state:

.follow-us.active {
    color: #C1A473;
}

Add a simple click listener to switch its active class (place it before the closing </body> tag inside a <script></script>):

$('.hamburger').click(function() {
  $('.follow-us').toggleClass('active');  
});

Answer 3

Answer №2

CSS is not about executing commands, but rather about setting up rules that determine how styles are applied to different elements based on their selectors. It seems like there may be an issue with the way your .active class is being applied - it appears to be assigned to a container separate from the one containing the hamburger icon. To address this, consider applying the class to a parent element that encompasses both the current location and the hamburger icon. This way, you can write a single rule that affects both elements when the .active class is added. Another option is to assign the .active class to multiple elements, including the parent of the hamburger icon along with its current placement.

Answer 4

CSS is not about executing commands, but rather about setting up rules that determine how styles are applied to different elements based on their selectors. It seems like there may be an issue with the way your .active class is being applied - it appears to be assigned to a container separate from the one containing the hamburger icon. To address this, consider applying the class to a parent element that encompasses both the current location and the hamburger icon. This way, you can write a single rule that affects both elements when the .active class is added. Another option is to assign the .active class to multiple elements, including the parent of the hamburger icon along with its current placement.

Implement a CSS rule when the menu is in an open state

Answer №1

Answer №2

Similar questions

What is the best way to achieve a horizontally compact layout in Bootstrap by centering the content?

Using jQuery and regex to only allow alphanumeric characters, excluding symbols and spaces

Is it possible to alter the JSON file being loaded in AngularJS by passing a variable?

Using JQuery to obtain an array of the widths of the td elements in a specific row

I'm looking for a way to set up a PropType that accepts a boolean value, but also allows for

Best practice for showcasing the output of an array in Javascript

Tips for utilizing an observable in Angular without subscribing to it

CSS: Only one out of three <div>'s has the styles applied in JSFiddle

Loading dynamic images in HTML using Javascript and Django templates

Utilize the ng-controller directive with unique aliases across various sections of HTML code

Next.js React struggles to receive click events within a customized hook in order to modify the state of the parent component

What methods can be used to prevent FireFox from continuously loading with a long-polling request?

Struggling with filtering an array fetched from an API using VueJS

What is the best way to fetch HTML content using JavaScript?

Obtaining the accurate offsetTop and offsetLeft values for an element following a CSS3 rotation

The issue of req.file being undefined when using Multer in Node.js with Express Router

Struggling to implement a Rock Paper Scissors game using HTML, CSS Bootstrap4, and JavaScript, specifically facing challenges in getting the function to select a new image

An error occurs when using e.slice function

"Uploading" a picture using jQuery

Single array returned by observable