3

I'm using off canvas menu that I've been trying to get work correctly. In order to get my fixed menu and off-canvas to play nicely, I had to take my header out of the off canvas inner wrapper, but now my header won't move over when the menu is opened.

When off canvas is opened, it applies a .is-open-right to the inner wrapper which then has the CSS applied to it.

I'm trying to add this line of CSS to my header ONLY when the .is-right-open class is added to my wrapper. 

-webkit-transform: translateX(-450px);
    transform: translateX(-450px);

I was trying to target this way:

.is-open-right, .is-open-right > .header  {
-webkit-transform: translateX(-$offcanvas-size-large);
transform: translateX(-$offcanvas-size-large);

}

My HTML Looks like this when menu is closed:

<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>

HTML when Opened

<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""></div>
</div>

Am I able to target my header element only when the next sibling element has the class .is-open-right ?? From what I've read... looks like I might have to go to a JS solution.

4ever Youngz
  • 158
  • 1
  • 12

1 Answers1

2

There is no 'previous sibling' selector. Your solution should be to make sure you are applying the classes to the parent element.

Your HTML should look like this:

<div class="off-canvas-wrapper is-off-canvas-open is-open-right">
  <header class="header scrolled" role="banner"></header>
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>

Another option is to move the header below the off-canvas-wrapper-inner so you can target it as the next sibling (using +).

The current W3 spec draft also includes a :has pseudoselector. When fully supported we can solve this problem with the following selector: .previous-class:has(+ .next-class)

ebuat3989
  • 4,701
  • 3
  • 21
  • 17
  • That would require me to change the JS file that works with the off-canvas, so that's not really an option, as I would have to re-write a lot of things. Also, with your solution, that would move over everything and messed up my fixed header. The translate and fixed position don't play well. Unfortunately this really wouldn't be an option and sounds like I will have to make a JS script to do this. – 4ever Youngz Apr 19 '16 at 23:29
  • I see, if you cannot change the classes or ordering of elements then I don't think you can target the header with CSS. Does that answer your question? – ebuat3989 Apr 19 '16 at 23:31
  • Yea it reassures what I thought i had to do. Thank you for your input and guidance! – 4ever Youngz Apr 19 '16 at 23:33