Navigation issue
Permalink Browser Info Environment
Hi,
I want to use mage menu with seren and it works fine except when it comes to mobile phone navigation then mega menu does not work. It seems to be some sort of clash with seren. I experimented with removing a div class in the header which related to the nav and it allowed me to see mega menu in a vertical mode rather than collapsed though it was still not functional.
Any thoughts?
Thanks
Phil
I want to use mage menu with seren and it works fine except when it comes to mobile phone navigation then mega menu does not work. It seems to be some sort of clash with seren. I experimented with removing a div class in the header which related to the nav and it allowed me to see mega menu in a vertical mode rather than collapsed though it was still not functional.
Any thoughts?
Thanks
Phil
Type: | Pre-Sale |
---|---|
Status: | Resolved |
Hi Jennifer
Thanks for the suggestions
removing this piece of code
.
Totally damages the look of the header.
The mega menu works on any windows browser at any size and goes into mobile hamburger mode a-ok. It also work on tablets but its the mobile phone nav that is the issue all i get is a vertical overlay of the mega menu that does not work. Some kind of loading issue I guess.
I will contact the mega menu developer and see if he has any thoughts thought he is not responding to requests at the moment.
Again thanks for your suggestions, most appreciated.
Best
Phil
Thanks for the suggestions
removing this piece of code
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation"> </nav> <!--/.navbar-fixed-top -->
Totally damages the look of the header.
The mega menu works on any windows browser at any size and goes into mobile hamburger mode a-ok. It also work on tablets but its the mobile phone nav that is the issue all i get is a vertical overlay of the mega menu that does not work. Some kind of loading issue I guess.
I will contact the mega menu developer and see if he has any thoughts thought he is not responding to requests at the moment.
Again thanks for your suggestions, most appreciated.
Best
Phil
Hello
Yes, I'm afraid that the Seren theme's menu is using Bootstrap and I suspect it is hard to use Mega Menu without a lot of customisation. That div is a Bootstrap div and it is possible that leaving it in may be causing problems for your mega menu, as there are a lot of Bootstrap menu styles attached to the div.
I tried removing it and it didn't seem to affect the appearance of the top menu greatly, although it takes away the "fixed" aspect of the menu, i.e. the menu won't stay fixed to the top of the page when you scroll. Please see attached images.
There are other themes on the marketplace that you might find easier to use with the Mega Menu, as some themes just have an empty editable area for the menu, whereas ours tend to be more integrated and rely on using a Bootstrap menu that comes with the theme, rather than an external menu. You could try asking the Mega Menu developer if there are any themes that he recommends using with it.
If you would like us to look at your menu, you can send the link. Please note this thread is public, so if you want to send it privately, please pm or email contact@pilipalawebdesign.com
Thanks,
Jennifer
Yes, I'm afraid that the Seren theme's menu is using Bootstrap and I suspect it is hard to use Mega Menu without a lot of customisation. That div is a Bootstrap div and it is possible that leaving it in may be causing problems for your mega menu, as there are a lot of Bootstrap menu styles attached to the div.
I tried removing it and it didn't seem to affect the appearance of the top menu greatly, although it takes away the "fixed" aspect of the menu, i.e. the menu won't stay fixed to the top of the page when you scroll. Please see attached images.
There are other themes on the marketplace that you might find easier to use with the Mega Menu, as some themes just have an empty editable area for the menu, whereas ours tend to be more integrated and rely on using a Bootstrap menu that comes with the theme, rather than an external menu. You could try asking the Mega Menu developer if there are any themes that he recommends using with it.
If you would like us to look at your menu, you can send the link. Please note this thread is public, so if you want to send it privately, please pm or email contact@pilipalawebdesign.com
Thanks,
Jennifer
From looking at the link that you sent, I see what you mean. I don't know if you may need to adjust your mega menu settings to suit the theme (please see attached image), e.g. changing the colour to white and the position of the icon.
You will need to add custom CSS to increase the z-index for the hamburger as the fixed menu with Seren has a z-index of 1030, so it must be greater than this to show.
For example, with the settings that I used, I added this CSS (Go to Cog icon > Design > Customise > Custom CSS > enter your CSS in the popup and save for entire site):
I don't know if there are different selectors depending on the settings chosen, so you may need to use something like Firefox page inspector to see which selector you need to target with your CSS.
https://developer.mozilla.org/en-US/docs/Tools...
Thanks,
Jennifer
You will need to add custom CSS to increase the z-index for the hamburger as the fixed menu with Seren has a z-index of 1030, so it must be greater than this to show.
For example, with the settings that I used, I added this CSS (Go to Cog icon > Design > Customise > Custom CSS > enter your CSS in the popup and save for entire site):
#nav-icon3 { z-index: 1200; }
I don't know if there are different selectors depending on the settings chosen, so you may need to use something like Firefox page inspector to see which selector you need to target with your CSS.
https://developer.mozilla.org/en-US/docs/Tools...
Thanks,
Jennifer
Hi Jennifer,
I will explore all the css change tomorrow.
In the meantime do you understand this message when i inspect the pages
Best
Phil
I will explore all the css change tomorrow.
In the meantime do you understand this message when i inspect the pages
Source map error: request failed with status 404 Resource URL: http://.../packages/seren/themes/seren/css/bootstrap.min.css Source Map URL: bootstrap.min.css.map[Learn More]
Best
Phil
Hi
You could delete this line
/*# sourceMappingURL=bootstrap.min.css.map */
which appears at the very end of bootstrap.min.css, located here:
seren\themes\seren\css
Please see this thread for more information:
https://stackoverflow.com/questions/21773376/bootstrap-trying-to-loa...
Thanks,
Jennifer
You could delete this line
/*# sourceMappingURL=bootstrap.min.css.map */
which appears at the very end of bootstrap.min.css, located here:
seren\themes\seren\css
Please see this thread for more information:
https://stackoverflow.com/questions/21773376/bootstrap-trying-to-loa...
Thanks,
Jennifer
The Seren theme menu is quite complicated, as it has different areas incorporated into the navigation. Therefore, it may not be the easiest theme to use with the mega menu addon. In addition, it has a lot of styles that are attached to the menu.
That said, if you remove all of the divs relating to the nav functionality, you may be able to get it to work, but might need to make some further customisations. You could try removing the following code from header.php:
approx line 45,106
approx line 78 - 81
approx line 99,101
Please ensure that you save your modified header.php elsewhere so that you can upload it again should you ever update your Seren theme.
Thanks,
Jennifer