Cefalus theme - menu on mobiles

I have noticed a small failure in the menu view of Cefalus Theme on my site on phones: the + and - signs (plus and minus) in the menu are shown against the edge (= no right padding). It happens on iPhone 6, 7 and X, maybe all. The menu on tablets (iPad) is shown well, on desktop too.

I suppose now it is a css-thing but I cannot find out with what setting to change. I cannot find a reason by which I should have caused this myself.

Is there anyone who can help me with this?

Cheers
Rudolph Smits (Netherlands)

www.belard.nl
rapidweaver 8
theme Cefalus (used only recently)

Does it happen in the latest version of the theme? You appear to still be using an older September 2016 version.

The newer theme version has a better mobile toggle button - a conventional ‘hamburger’ icon with the word ‘menu’ next to it, to comply with disability legislation. 15px of padding either side of the mobile menu button, from what I can see in our live demo.

Dear Will
An old version? Could be so. I will take a look!
And thanks for your reply!

Cheers
Rudolph Smits

Will Woodgate is right, I see now what he saw: – CEFALUS 1.2.6 SEPT 2016–

But the theme seems to be abandoned, the site of the author does not exist anymore. So getting a newer version is not possible.

Then I guess I have to overwrite a css-setting for devices with max-width 320px. But how should I do that? But please be aware that the placement for “open menu”-button (the three horizontal strips) is correct, also on mobile phone!

This theme along with all of Hank’s themes are now being supported by @willwood
https://themeflood.com/cefalus/

@teefers: it’s a small world… :wink: Thanks!

@will: a friend of me uses the same version. His site shows well on my iPhone. So the thought comes back that I did something wrong and caused this myself. And a newer version does possibly then not resolve this issue.
Have you any idea of what possibly can be done and - done with errors - might cause such an misfunctioning? Recently I have changed many Styled Text-pages to HTML-pages. But as this menu setting is seen on unchanged pages too this change can hardly be the cause. I have not changed general site-settings but frankly, I do not know when this occured for the first time. Maybe already on my site version 0.0.

@willwood

Oh, there HAS BEEN a change that affects the whole site. I have an own css-file.
In it among more this:

h2 {font-family:arial, “Courier New”, sans-serif; font-size:16px!important; font-weight:bold!important;}

h3 {margin:10px 0px 20px 0px!important; font-family:arial, “Courier New”, sans-serif; font-size:20px!important; font-weight:bold!important; color:#228B22!important;}

h4 {margin:10px 0px 14px 0px!important; font-family:arial, “Courier New”, sans-serif; font-size:18px!important; font-weight:bold!important; color:#483D8B!important;}

p, ul | {color:black;}

Could the h2-setting have (mis)done something?

@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.

But nevertheless you did!! Thanks a lot!!
You gave me some homework and I will try to change or remove some css-settings.
I saw already how to obtain the newest theme version. Maybe I should do so, but first find a possible cause.

Cheers
Rudolph Smits

1 Like

Mister Woodgate, you did it!!! That css, whatever it does, did the job.
As far as I can see it does not influence my own content, so thanks a lot!

I am still developing my site (now I want to add PHP) but after a while I will have a look at the new theme version and decide whether it has additional value for me or not.

But this issue can be closed, thanks to you!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.