@rudolphsmits I wont commit too much time towards answering this question, because it is not my theme and we’ve already determined you are using an outdated version. Which might be part of the problem you are seeing.
Since version 1.2 Henk released several updates and I myself have also released updates. How you have come to still be using an old version is unknown and perhaps something you want to fix. The current version is 3.3.
But the theme is not abandoned. It has been very widely publicised on these forums and elsewhere that I bought out Henk’s company when he retired in July 2017. A simple Google search or a search of the RapidWeaver addons website would show you the theme is still available and being actively developed.
Your menu buttons are not within any <h2> tags that I can see at this end. So I do not suspect the issue relates to your CSS code.
But as always, if you do suspect some custom CSS code might be causing problems, you can temporarily remove or comment it out to test.
Remember to clear your browser cache, when testing CSS changes on a published website.
My theory is that there is something in the page that causes the display of a horizontal scroll bar on narrower screens. For example, a table or container that might already be set to 100% wide, but accidentally has additional borders or margin applied on it - so its combined width ends up being wider than 100%. Essentially CSS box-model type stuff.
Your expand and contract buttons are placed 0px on the right of the menu. Nothing at all bad about that. Other than because your webpage is now wider than 100% (as denoted by the horizontal scrollbar), those buttons are starting to move outside of the viewport (the viewable area of the page).
The test is to swap those buttons from right positioning to left positioning like so, with this simple CSS:
a.mean-expand {
right: auto !important;
left: 89vw !important;
}
That brings the buttons back into view again. ‘vw’ does not stand for ‘Volkswagen’ in this instance, it instead stands for ‘viewport width’! An alternative unit of measurement that can be used for positioning items from the edge of the page - when you need them to respond to viewport sizing.
The above is a quick hack to try, if you are unable to determine where the horizontal scrollbars are coming from.
Long term, it may be in your best interests to update your theme or use a different theme from another provider if you’re not happy with it.
This old version of Cefalus used a menu plugin called mean-menu. I now use my own menu plugin in all these themes derived from the Gator codebase.
I hope this helps you find a solution.