I'm having a few issues with the Hamburger Menu. My site is currently set up as a one page site with menu anchors used for navigation. My Main Menu used for navigation uses custom links to scroll to the menu anchors.
1. When the menu is open, I see both the hamburger icon AND an X icon (see attachment). The X does not close the menu as would be expected. Instead I have to click the Hamburger Icon to close the menu. I also don't see any options for changing the size of the X. I would prefer to see a functioning X to close the menu, and to have options for styling the X. However, when I click a menu link, some scrolling happens, and that makes the hamburger disappear. At that point the X begins to work for closing the menu.
2. When I enable the sticky header, the menu no longer works at all. I see the hamburger icon but nothing happens when I click it. This problem is fixed when I set Header Transparency to "Normal" but I want the menu to be sticky. I experimented with other plugins, and got a sticky header to work using a plugin called "myStickyMenu." But I've disabled that, hoping I can work through these issues with the built-in functionality.
3. I would like the menu to automatically close after clicking a link on the menu. I've currently got the page setup as a one-page site with menu anchors. Right now, if I click a link, I can see the page scrolling in the background, but the menu remains covering the screen. I have to X out of the menu with an additional click. For testing purposes, I added a Test page, and a portfolio category to the menu. When I click one of those menu links, it loads a fresh page with the menu is closed. This is how I would like it to behave even when clicking a link that takes me to a menu anchor on the same page.
Hello, thanks for your reply. But you only addressed one of my three problems.
These other 2 problems still exist:
1. The sticky header option still does not work correctly. When I enable it, the header becomes sticky but the hamburger menu no longer works. I click the hamburger and nothing happens.
2. Is it possible for the menu to close itself after a link is clicked? Right now when a link is clicked, the menu remains open, so a user has no way of realizing whether the link did anything.
So when you update the theme, please delete the Neuron Core plugin and install it again by going to Appearance > Install Plugins. It's already included in the theme.
Yes, I was already running the latest version of both Bifrost and the Neuron Core Plugin. I deleted and reinstalled the Neuron Core plugin, and the sticky menu is still not working correctly.
I've created another header template like the one that you're using and named it "Header Sticky", then I went to Appearance > Customize > Header > Layout and selected that new template as a sticky template, now it's working alright.
Thank you, I see the sticky header is now working. My last remaining issue is that I would like the full screen menu to close after a link has been clicked. Is there a simple way to make this happen?
I'm not sure how, but the menu now closes when a link is clicked.
I have a few more questions about styling the menu. I would like to be able to adjust and style the X that closes the menu. I found a way to adjust its position using CSS, but I would like to also be able to customize its size, color, and stroke.
I would also like the option to adjust the position of the dropdown carret for the submenu items.
1) I've added the following script yesterday for the header to close automatically when you click on a menu item at Dashboard > Settings > Insert Headers and Footers.
Thanks for all your help so far. I'm getting close to having everything in order. I've made a lot of content changes over the last few days, and suddenly the menu is not working on the homepage on mobile. I can't retrace what change has made this happen. It works on desktop and tablets just fine. At first I thought it wasn't working on mobile at all, but then I noticed that it works if I'm on a page other than the home page.
Hi, I had already tried adjusting the z-index. I just went in bumped it all the way up to 999, and I'm still having the same problem. The header has always been the top layer, but when I tap the hamburger on mobile I briefly see a square container appear around the hamburger but then nothing happens and the menu doesn't appear.
I am using the sticky header option, with a different menu for main and sticky. I adjusted the z index on both menus. It's still not working. Could you take a closer look?
I'm having a few issues with the Hamburger Menu. My site is currently set up as a one page site with menu anchors used for navigation. My Main Menu used for navigation uses custom links to scroll to the menu anchors.
1. When the menu is open, I see both the hamburger icon AND an X icon (see attachment). The X does not close the menu as would be expected. Instead I have to click the Hamburger Icon to close the menu. I also don't see any options for changing the size of the X. I would prefer to see a functioning X to close the menu, and to have options for styling the X. However, when I click a menu link, some scrolling happens, and that makes the hamburger disappear. At that point the X begins to work for closing the menu.
2. When I enable the sticky header, the menu no longer works at all. I see the hamburger icon but nothing happens when I click it. This problem is fixed when I set Header Transparency to "Normal" but I want the menu to be sticky. I experimented with other plugins, and got a sticky header to work using a plugin called "myStickyMenu." But I've disabled that, hoping I can work through these issues with the built-in functionality.
3. I would like the menu to automatically close after clicking a link on the menu. I've currently got the page setup as a one-page site with menu anchors. Right now, if I click a link, I can see the page scrolling in the background, but the menu remains covering the screen. I have to X out of the menu with an additional click. For testing purposes, I added a Test page, and a portfolio category to the menu. When I click one of those menu links, it loads a fresh page with the menu is closed. This is how I would like it to behave even when clicking a link that takes me to a menu anchor on the same page.
Hi,
Can you please provide me with your wp-admin, I will have a quick look to see what's going on.
Feel free to ask for anything you need.
Kind Regards
Hi,
I am very sorry for the late reply, we were not working on the weekend.
I've removed the z-index that you've added to the first section of the header, now i'ts working alright.
- https://prnt.sc/13c4waf
Feel free to ask for anything you need.
Kind Regards
Hello, thanks for your reply. But you only addressed one of my three problems.
These other 2 problems still exist:
1. The sticky header option still does not work correctly. When I enable it, the header becomes sticky but the hamburger menu no longer works. I click the hamburger and nothing happens.
2. Is it possible for the menu to close itself after a link is clicked? Right now when a link is clicked, the menu remains open, so a user has no way of realizing whether the link did anything.
Hi,
Please make sure that you're running the latest version of the Bifrost theme and Neuron Core plugin.
You can update the theme directly on your dashboard, via the plugin below:
- https://envato.com/market-plugin/
So when you update the theme, please delete the Neuron Core plugin and install it again by going to Appearance > Install Plugins. It's already included in the theme.
Feel free to ask for anything you need.
Kind Regards
Yes, I was already running the latest version of both Bifrost and the Neuron Core Plugin. I deleted and reinstalled the Neuron Core plugin, and the sticky menu is still not working correctly.
Hi,
I've created another header template like the one that you're using and named it "Header Sticky", then I went to Appearance > Customize > Header > Layout and selected that new template as a sticky template, now it's working alright.
Feel free to ask for anything you need
Kind Regards
Thank you, I see the sticky header is now working. My last remaining issue is that I would like the full screen menu to close after a link has been clicked. Is there a simple way to make this happen?
I'm not sure how, but the menu now closes when a link is clicked.
I have a few more questions about styling the menu. I would like to be able to adjust and style the X that closes the menu. I found a way to adjust its position using CSS, but I would like to also be able to customize its size, color, and stroke.
I would also like the option to adjust the position of the dropdown carret for the submenu items.
Hi,
1) I've added the following script yesterday for the header to close automatically when you click on a menu item at Dashboard > Settings > Insert Headers and Footers.
<script> jQuery(document).ready(function($) { $("ul li.menu-item a").click(function () { $(".neuron-fixed-yes").removeClass("active"); }); }) </script>2) Can you please add the following code at Appearance > Customize > Additional CSS.
.a-close-button svg { color: #FFF !important; width: 40px; height: 40px; }Feel free to ask for anything you need.
Kind Regards
Thanks for all your help so far. I'm getting close to having everything in order. I've made a lot of content changes over the last few days, and suddenly the menu is not working on the homepage on mobile. I can't retrace what change has made this happen. It works on desktop and tablets just fine. At first I thought it wasn't working on mobile at all, but then I noticed that it works if I'm on a page other than the home page.
Hi,
Please go and edit the header template, and at the Advanced tab of the section, go and add some z-index to that section and check it again.
Feel free to ask for anything you need.
Kind Regards
Hi, I had already tried adjusting the z-index. I just went in bumped it all the way up to 999, and I'm still having the same problem. The header has always been the top layer, but when I tap the hamburger on mobile I briefly see a square container appear around the hamburger but then nothing happens and the menu doesn't appear.
I am using the sticky header option, with a different menu for main and sticky. I adjusted the z index on both menus. It's still not working. Could you take a closer look?
Hi Noah,
I've added the following code at Appearance > Customize > Additional CSS, can you please check the header now.
.neuron-fixed-yes.neuron-fixed-hidden-yes .active { display: block !important; }Feel free to ask for anything you need.
Kind Regards
The menu is still not working on mobile.
Hi Noah,
I am very sorry for the late reply, we were not working on the weekend.
I've added the following code at Appearance > Customize > Additional CSS, and now it's working alright on the home page.
.elementor-element.elementor-element-0a12b62.neuron-fixed-yes.neuron-fixed-hidden-yes { display: block !important; }Feel free to ask for anything you need.
Kind Regards