In my view, I have the following code snippet:
<div class="bottom-nav container-fluid">
<div class="container">
<div class="row mobile-menu-row">
<div class="col"></div>
</div>
<div class="row mobile-menu-row">
<div class="slidedown"></div>
</div>
The elements "Slidedown" and "Slideup" appear based on user interaction. Currently, I have a height of 440px set for bottom-nav which seems excessive. I only want this height to be applied if Slidedown is present and the screen size is under 768px. Any suggestions on applying CSS styles to one class based on the presence of another class?
I've attempted the following approach which didn't work:
@media and (max-width: 767px) {
.bottom-nav .slidedown{
height: 440px;
}
}
This failed because it targeted slidedown instead of bottom-nav.
My JavaScript file includes:
const nav = () => {
const mobileButton = document.querySelector('a.mobile-button');
const menu = document.querySelector('.mobile-menu-cont');
const regionLink = document.querySelector('.mobile-menu-row ul > li');
const regionMenu = document.querySelector('.mobile-menu-row ul > li > ul');
const bottom = document.getElementsByClassName('bottom-nav');
function init() {
mobileButton.addEventListener('click', toggleMenu);
regionLink.addEventListener('click', toggleSubMenu);
}
let toggleMenu = (e) => {
e.preventDefault();
if (menu.classList.contains('slideup')) {
menu.classList = 'slidedown';
} else {
menu.classList = 'slideup';
}
};
if (menu.classList = 'slidedown'){
bottom.setAttribute("style", "height: 440px;")
} else {
bottom.setAttribute("style","height: 0;")
}
Although I thought this condition would work, it caused issues throughout the page.
Another attempt I made was:
let toggleMenu = (e) => {
e.preventDefault();
if (menu.classList.contains('slideup')) {
menu.classList = 'slidedown';
bottom.setAttribute("style", "height: 440px;")
} else {
menu.classList = 'slideup';
bottom.setAttribute("style", "height: inherit;")
}
};
However, this disrupted other JavaScript functions on the page.