First I’d like to thank Thomas Kimmich for his video series, even though I haven’t watched all of them, they really helped me get going.
Then I must thank Caleb Grove for Backdraft. It really has saved my life.
Having said that, it still took me a while to get my head around all this. I’m fairly happy with what I have so far, but I have a problem with the menu bar detaching from my responsive header.
I know it’s my fault because I am not using the standard responsive header module as supplied with Backdraft, but I couldn’t get it to do what I wanted.
If you look at my example, you can see that with a normal width screen, it does exactly what I want, with a sticky menu.
However when you make the screen very narrow the menu gets lower and lower and hides the image beneath it.
the problem here is, that the menu doesn’t get lower - it simply keeps its top (static) position which is 107px - right?
And now the point:
If #menu-wrapper would be part of the @media query you’d have the chance to say:
@breakpoint mobile → position-top: something different (98px)
But all this said, it could even confuse sticker action (theoretically) by changing the position? Hmm - not sure, really.
And now a thing only Caleb can answer:
What is the recommended way in backdraft if it comes to “custom items”? Extract the internal css and add it there or is it even possible to start a new @media in the page head and leave the default? I tend to the second and if you could follow exactly my screencasts.
Never tried this honestly - but C. will rush in here and clarify, for sure.
