CODEWITHSUNDEEP
csssassfrontend
Evan Hickman
Evan Hickman

Reputation: 69

SASS Conditional: set Property Value based on another Property Value

I'm using slideout.js for a mobile nav and upon each page load, the menu flashes on the screen for a moment and disappears until the hamburger button is toggled. This doesn't happen if I set the div containing the nav to display: none, but of course when I open the menu, none of the links are displayed.

My question is, using Sass, can I create a conditional that performs the following logic on two separate classes: 

if .slideout-menu is not set to display: block

then

.mobile-nav should be set to display: none;

Upvotes: 0

Views: 516

Answers (1)

webdevdani
webdevdani

Reputation: 1102

CSS can't react to changes that happen on a page without JS help besides from pseudo-classes, so unfortunately you can't target it that way. slideout.js adds classes to style different states of the slide-out menu so try targeting those.

Try something like this:

.slideout-menu .mobile-nav {
   display: none;
}
.slideout-open .slideout-menu .mobile-nav {
     display: block; // or whichever display property you need
}

Going off of the CSS states in index.css from https://slideout.js.org/

Upvotes: 1

Related Questions