Currently, I am working on a website, that uses a conditional menu when the page that is viewed is not the home menu. This had to be done due to the usage of scroll to ID, which does not perfectly work with full links from main menu (reloads page then scrolls). Thus I got a main menu for the main page which has scroll to ID using anchor points #anchor.
and an alternative menu which has a condition to show when the person is viewing a different page than the main page. This menu uses full link + anchor website.com/#anchor
The problem is that the alternative menu does not switch to Mobile menu, which is logic cause it has a different name compared to the primary menu. Thus the build in CSS in the VANTAGE theme is not able to change this to a mobile menu.
However, as I currently want all menu’s the same I was wondering what the best solution is. Go through the files of vantage, trying to find the correct CSS, copy it give different classes to it and state in the CSS that it has to show that menu on all pages excluding the main page.
Or does siteorigin developers have an idea that works better?
I do hope to hear from you.
best regards
The website: TEKAB.nl (Dutch website) The problem is found in disclaimer page
Hi Rolf,
That’s odd. You should be able to do this without issue. To clarify, are you relying on the basic browser scrolling functionality or something like Page scroll to id.
Regarding the issue at hand, what are you using to change the menu over on other pages?
Hi Alex,
Thanks for your reply.
I am currently indeed using scroll to ID. Which refreshes the page when using full links (it is indeed strange on a different webpage I do not have this issue, but can’t find the bug that causes it)
I use https://nl.wordpress.org/plugins/conditional-menus/ to decide when to use what menu.
Thanks for the help so far. :)
Hi Rolf,
The mobile menu in Vantage works by simply outputting the main menu again in a different format. Does the plugin you’re using allow for you to automatically change the menu over when on mobile devices?
Regarding Page scroll to id refreshing, it seems to be working without issue for me. Did you manage to resolve this issue?
Hi Alex,
The page scroll to ID works on main menu cause I am using #anchor instead of full site Tekab.nl/#anchor
if I use full site scroll to ID it doesn’t scroll it just refreshes the page and then scrolls (prob error with scrolltoid)
however, the issue I have is regarding the alternative menu using conditional formatting (https://www.tekab.nl/disclaimer/)
The menu on alternative pages have links like: tekab.nl/#anchor to ensure scroll to page on different page works.
However, this alternative menu, because it is not a main menu, does not switch to mobile.
Should I search for the CSS of the mobile menu from vantage and state that the alternative menu would change to mobile menu CSS format when size is <xxx?
Is this format findable somewhere or is there a different way of forcing an alternative menu to use the mobile menu format?
Thanks for your responses so far and sorry for my late reply (was on holiday)
Hi Rolf,
Okay so you’re having issues with the scroll so I would recommend resolving that rather than swapping out the menu.Swapping the menu out does allow you to avoid the issue, it doesn’t resolve the issue and it significantly complicates things.
We will replace whatever menu is present in the intended area. As the theme isn’t able too, I suspect the menu is swapped out in a non-standard manner which is why it’s not working correctly. How are you swapping out the menu?
The mobile menu relies on JavaScript to work so you can’t really use CSS to forcefully show it.
Hi Alex
The issue is that from a different page tekab.nl/disclaimer
it would only scroll to the designated link on the main page by using tekab.nl/#anchorpoint
However using tekab.nl/#anchorpoint on the main page in the menu will cause issues regarding the scrolling. It will refresh the page and then go to the anchor point instead of going to the anchor point fluently.
However, if you think this can be fixed then i guess I should look into where it goes wrong.
Thanks Alex for your help.
I solved the issue by just fiddling around.
Using /#anchorpoint in the menu will solve the issue of having a page refreshing constantly which you get when using a full HTML link and removes the limitations of having a single page scroll only that you get when using #anchorpoint only.