Footer Menu Link Color

February 20, 2025 · AI Conversations

User

a {
color: $primary;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
display: inline-block;

&:hover {
color: $primary;
text-decoration: underline;
//border-bottom: 1px solid $primary;
}

&:visited {
color: $primary;
text-decoration: underline;
//border-bottom: 1px solid $primary;
}

&:active {
color: $primary;
text-decoration: underline;
//border-bottom: 1px solid $primary;
}

.elementor-button-wrapper & {
text-decoration: none !important;
}
}
but for footer menu change default color to #0e0e0e

Assistant

You can modify your SCSS to apply a different color specifically for footer menu links while keeping the default styles intact. Here's how you can do it:

a {
  color: $primary;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  display: inline-block;

  &:hover,
  &:visited,
  &:active {
    color: $primary;
    text-decoration: underline;
  }

  .elementor-button-wrapper & {
    text-decoration: none !important;
  }
}

// Footer menu specific styles
.footer-menu a {
  color: #0e0e0e;

  &:hover,
  &:visited,
  &:active {
    color: #0e0e0e;
  }
}

### Explanation:
– The default link styles remain unchanged.
– A new `.footer-menu a` selector ensures links inside elements with `.footer-menu` have `#0e0e0e` as their color.
– It applies the same hover, visited, and active state styles to footer links while keeping them distinct from the global styles.

Let me know if you need further tweaks! 🚀

User

but apply all other styles except colors

Assistant

Got it! You want to keep all styles the same for footer menu links but only change the color. Here's the updated SCSS:

a {
  color: $primary;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  display: inline-block;

  &:hover,
  &:visited,
  &:active {
    color: $primary;
    text-decoration: underline;
  }

  .elementor-button-wrapper & {
    text-decoration: none !important;
  }
}

// Footer menu specific styles (only changing color)
.footer-menu a {
  color: #0e0e0e;

  &:hover,
  &:visited,
  &:active {
    color: #0e0e0e;
  }
}

### Key Adjustments:
✅ The `.footer-menu a` selector applies **only the color change** while keeping all other styles (text-decoration, transition, etc.) from the main `a` styles.

Let me know if you need any refinements! 🚀

User

without hover will change

Assistant

If you want only the default color to change for footer menu links, while keeping the hover, visited, and active states the same as the global `a` styles, you can do this:

a {
  color: $primary;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  display: inline-block;

  &:hover,
  &:visited,
  &:active {
    color: $primary;
    text-decoration: underline;
  }

  .elementor-button-wrapper & {
    text-decoration: none !important;
  }
}

// Footer menu specific styles (only changing default color)
.footer-menu a {
  color: #0e0e0e; // Change only the default color
}

### What This Does:
✅ Changes only the **default (non-hover) color** of footer menu links to `#0e0e0e`.
✅ Keeps hover, visited, and active styles **consistent** with the global `a` styles.

This way, the hover effect and other states will still follow the primary link styles. Let me know if you need any tweaks! 🚀

Footer Menu Link Color

Leave a Comment Cancel