-
Posts
-
The menu looks great on all all different browsers except our employee’s Safari browser. On that browser, any of the longer headings break into 2 lines and the second line is not on the menu bar (it appears over the image I have there just below the navigation)
Safari: 8.0.6
OS XHey WFFC,
Thank you for using Enfold.
Could you please provide a screenshot of the issue? We checked the site on Safari Windows 7 and the menu looks the same when you see the site on Chrome.
Best regards,
IsmaelHere is a link to a screenshot of the issue:
https://drive.google.com/file/d/0B6BGyv0i9Fp6TnhXZ1dwYkdxT29jMkJ3bnhFZTltdzdyNnNB/view?usp=sharing
Perhaps it is only one newer Safari and/or Macs.
Side note (should I open a new thread?): my footers are all smooshed on mobile because they are a percent width and they aren’t cascading. Is that normal? Did I make some bad CSS?
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.avia-safari .av_seperator_big_border .av-main-nav > li > a { min-width: 150px; }Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
YigitGood morning,
I managed to resolve it (at least on this one computer) by adding:
.avia-safari #top #header_main > .container .main_menu ul:first-child > li > a {min-width:140px !important;}Is that a good long-term solution? It unfortunately makes the menu buttons all a uniform size, but since we probably won’t add new top-menu items after launch I feel like it will be okay.
Hi!
Since you will not be adding new menu items, that seems like a good long term solution :)
Let us know if you have any other questions or issuesBest regards,
YigitShould I make a new thread for this question:
My footers are all smooshed on mobile because they are a percent width and they aren’t cascading like 1/4 content would. Is that normal? Did I make some bad CSS?
Also note that I already broke my ability to use 1/4 columns on any other page because I messed with the width of them for the footer. :(
Also I tried adding this based on another thread:
@media only screen and (max-width: 750px) {
.responsive #socket .sub_menu_socket {
display: block !important;
width: 100%;
}.responsive #socket .sub_menu_socket ul li {
float: none;
border-left: none;
text-align: center;
}}
Hi,
It looks like you’ve used the Grid Row element there, could you try using 1/4 elements instead? Or you could simple use the default footer functionality under Appearance–>Widgets.
Thanks,
RikardI am using Appearance–>Widgets, I don’t know how I could even change that to grid row or 1/4. The styles use the 1/4 element though.
Hey!
Also note that I already broke my ability to use 1/4 columns on any other page because I messed with the width of them for the footer. :(
What is the code that you used? Insert the #footer selector so that it will affect columns inside the footer container. Example:
#footer .av_one_fourth { // style here }Cheers!
IsmaelOh, duh, of course! I thought I had done that but I think I never went back to it. So 1/4 columns should be fixed.
So now… how do I make the footer stack?
Is this how I broke it?#footer .av_one_fourth {
margin-left: 0%;
width: 24.5% !important;
}
- You must be logged in to reply to this topic.