-
Posts
-
Enfold, I am working on a site currently at preucil.baslerdesign.com, probably my 15-20th site built on Enfold. I am getting pretty good at figuring things out, but I need help here.
Unfortunately, I am dealing with fairly lengthy secondary menu names: Preucil School of Music | Preucil Preschool | Music Together®
the length of these three items just does not work well on phone sizes. I reached out to your all some time back to help my with some code to increase the font size on these for phone break point:
/*—————————————-
// Increase the size of Secondary Menu text
//————————————–*/
#header_meta a, #header_meta span {
font-size:15px !important;
}This has worked fine. But, different devices are breaking the menu at different places. My iPhone 13 Max breaks after Preucil School of Music, dropping Preucil Preschool and Music Together to a second line.
Other Android Devices, a putting Preucil School of Music and Preucil Preschool on the first line and dropping just Music Together to the second line.
Given this, the behavior of the secondary menu dropdowns are wonky. My iPhone does a good job of keeping the dropdown content “on-screen” without cropping off the content at the left of the screen. My client’s iPhone is reportedly chopping off the dropdown content.
I am stumped. My first thought was that maybe they are changing text sizes through accessibility settings causing this. My other client is an Android user and is reporting the same thing.
I am wondering if breaking these secondary nav into three lines would work. The three lines would have some sort of break control where I could break each line predictably. This solution would be uglier than I would like but the reality is the “Preucil School of Music” item takes up one line at a reasonable size by itself.
And, if this can be done, it would be nice to have some sort of line-height control so that the spacing between lines is mobile friendly as each of these need to be clickable.
Any other thoughts?
Another point: It appears to be just the Preucil Preschool menu that is running of the left edge of the screen—likely due to the staring position of the words Preucil Preschool, and the offset of the dropdown. Can this offset be reduced a fair amount so this does not happen?
Hi,
Thank you for the inquiry.
The site is currently down when we checked. Did you transfer it to a different domain?
Best regards,
IsmaelThis is a subdomain where I am building ut the site at. It should be up and steady? Not sure what the issue might have been. Please try again.
Hi,
Thanks for that. Please try to remove the !important bit from your CSS, then add this media query:
@media only screen and (max-width: 600px) { #header_meta a { font-size: 12px; } #header_meta .sub_menu li ul { left: 0; } }Best regards,
Rikard
- You must be logged in to reply to this topic.