Currently, I am working with sass and finding it challenging to modify the structure of the page easily.
The layout I have in place is due to my header having varying sizes depending on the specific page users are browsing:
<div class="container">
<div class="header">
<div id="large-header"></div> (or <div id="small-header"></div>)
</div>
<div class="full-screen-menu"></div>
</div>
I need the full screen menu to adjust to either 50px or 100px depending on whether .header > #small-header or .header > #large-header is present, while still ensuring that the header remains visible alongside the full screen menu. Ideally, I would like to implement a conditional structure similar to this:
.container {
@if .header > #large-header {
.full-screen-menu {
top: 100px;
}
} @else {
.full-screen-menu {
top: 50px;
}
}
}
However, I am facing limitations as I cannot use if statements and struggle with implementing a condition that travels up the DOM of one div and applies it to another div further down the hierarchy with a common parent.
If you have any suggestions or ideas on how I could resolve this issue, please share them. Any help would be greatly appreciated!