CODEWITHSUNDEEP
csssass
Osuwariboy
Osuwariboy

Reputation: 1375

Change the background color of a menu to show active page using SASS and twig

Ok, so my question's relatively simple and I'm certain I'm super close to solving it, but I just can't see the solution. I'm developping a website using October CMS and I'm using SASS to deal with my various CSS styles. What I'm trying to do here is basically have a menu visually show me on what page by altering the background color. Here's what I have in my SCSS file:

.left-menu{

        height: 30px;
        width: 186px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: 300;
        color: white;
        line-height: 30px;
        text-align: center;

        .normal {
            background: #f47321;
            background: linear-gradient(135deg, transparent 21px, #f47321 0);
        }

        .active {
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }

        &:hover{
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }
    }

And on my web page, I have the following:

<a href="/"><div class="{{ (page == 'accueil') ? 'left-menu active' : 'left-menu normal' }} ">ACCUEIL</div></a>

I'd like to point out that the twig condition works and, when I'm on the "accueil" page, I end up having the "left-menu active" part displayed in the class attribute and the "left-menu normal" class when I'm on another page.

My problem is that it doesn't work. For some reason, the "active" and "normal" parts don't get picked up. However, the "hover" works perfectly. Anyone has any idea what I'm doing wrong?

EDIT: In response to joknawe, I did the following modifications to my code (adding the ampersand and getting rid of the "normal" style):

.left-menu{

        height: 30px;
        width: 186px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: 300;
        color: white;
        line-height: 30px;
        text-align: center;
        background: #f47321;
        background: linear-gradient(135deg, transparent 21px, #f47321 0);

        &.active {
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }

        &:hover{
            background: #f68b1f;
            background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
        }
    }

This gets compiled to the following:

.left-menu {
  height: 30px;
  width: 186px;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 300;
  color: white;
  line-height: 30px;
  text-align: center;
  background: #f47321;
  background: linear-gradient(135deg, transparent 21px, #f47321 0);
}

.left-menu.active  {
  background: #f68b1f;
  background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
}

Then, in the html page, I have the resulting code:

<a href="/"><div class="left-menu active ">ACCUEIL</div></a>

However, it still doesn't work. All I have is the standard background, the "active" class doesn't seem to get picked up by the browser.

Upvotes: 2

Views: 760

Answers (1)

joknawe
joknawe

Reputation: 1540

You will need to add & to those selectors: &.normal and &.active (similar to &:hover)

Your current use is treating .normal and .active as children (applying to any child element of .left-menu that has those classes) when you are actually looking for the element to have both the .left-menu and .normal (or .active) classes.

https://css-tricks.com/the-sass-ampersand/

Side note:

You could probably do away with the .normal class and just add those styles directly to .left-nav since background will be overridden with &.active and &:hover.

You could also combine those 2 selectors if the styles will be the same: 

&.active, &:hover {
  background: #f68b1f;
  background: linear-gradient(135deg, transparent 21px, #f68b1f 0);
}

Finally, I'd probably suggest moving those styles to be applied to the <a> (vs. having a child <div>) if possible.

Upvotes: 2

Related Questions