I also tried using CSS to hide the Main Menu on the fixed header, but then it won’t show up on the sticky header either.
You’ll have to write a small Javascript code to make the menu visible after scroll and keep it sticky.
https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/
This is an old guide for a sticky menu, but you can test that plugin if that works for block themes.
Thread Starter
ok11
(@ok11)
Thank you for the response! The idea you gave me should e a good solution, unfortunately, I can’t seem to make the code work. I did some digging and I found something promising, but I can’t make it work for the life of me.
The code that I am trying to use is copied from here: https://dev.to/changoman/showhide-element-on-scroll-w-vanilla-js-3odm
I am not a programmer, so I don’t really know how to write code. The code I am trying to use looks like this:
JS:
<script type="text/javascript">
let scrollPos = 0;
const nav = document.querySelector('.header-nav-main');
function checkPosition() {
let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP
nav.classList.add('is-visible');
nav.classList.remove('is-hidden');
} else {
// Scrolling DOWN
nav.classList.add('is-hidden');
nav.classList.remove('is-visible');
}
scrollPos = windowY;
}
window.addEventListener('scroll', checkPosition);
</script>
CSS:
.header-nav-main {
visibility: hidden;
}
.header-nav-main.is-hidden {
visibility: hidden;
}
.header-nav-main.is-visible {
visibility: visible;
}
The CSS they gave as an example in the post doesn’t do what I need it to do, but, the JS seems to be working, so I tried finding a solution for the CSS part myself, but to no avail.
Can anyone point out what is wrong with the CSS part of the code I am trying to use? It hides the menu, but it won’t make it visible again.
Thank you!
Thread Starter
ok11
(@ok11)
I also tried the following CSS and it will hide the menu, but it won’t make it visible again, for some reason:
.header-nav-main {
scale: 0;
}
.header-nav-main.is-hidden {
Transform: scale(0);
}
.header-nav-main.is-visible {
Transform: scale(1);
}
Again, I am not good with code, so any help is greatly appreciated.
Is your website live? And can you share the url please so that I could check and suggest your better css code?
Thread Starter
ok11
(@ok11)
Sure, the website is under construction, so I password-protected it. The URL is drmike.ro and the password is “drmike”.
Thank you!
Hey @ok11,
You’re using a Commercial theme flatsome, and I am unable to see any suitable CSS classes provide you with any quick solution.
I recommend, contacting theme support for help on their official support page or checking their official theme documentation.
Thread Starter
ok11
(@ok11)
From my testing, using the class “.header-nav-main” makes the menu disappear, but I can’t make the code work to make it appear again. Can you spot any issues with the code I posted above? Maybe the answer lies there.
I will try asking flatsome support for their help too.
Thank you!
I have already tested the code you posted above, that is not helpful with the current theme.
Thread Starter
ok11
(@ok11)
I see, well the folks at Flatsome didn’t help me either because I bought this license a while ago and the 6-month support has ended
Thread Starter
ok11
(@ok11)
I was able to achieve what I wanted through a different solution:
1. I set the page template to “Page – Full Width – Header on scroll” (I am sure there are other themes that have similar templates to Flatsome) which basically means that on that page, the header will appear only after scroll
2. I identified the HTML code for the Nav Icon type menu, which in my case is:
<a href="#" data-open="#main-menu" data-pos="center" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
<i class="icon-menu" ></i>
<span class="menu-title uppercase hide-for-small">Meniu</span>
</a>
3. I added the code as an HTML block in the place I wanted it on my page (top left corner)
I hope this solution might help others in the future!
