-
Posts
-
I was wondering if you could please help me fix a couple of issues I am facing for one of my clients’ website.
On the iPad the menu runs into the logo and in the iPhone, a white square is displayed instead of the menu. If you click on the white square the menu does appear, however, people may not realise that is the menu.
I have another client on whose website the white square appears with black lines.
Please see link below for screen shots of both issues.
http://www.yourmarriagecelebrant.com.au/error/
Would you be able to help me with some quick CSS fixes for these two issues.
As always your help is greatly appreciated.
Ivana
Hey Ivana!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1140px) { .av-main-nav > li > a { padding: 0 7px; }}and please go to Enfold theme options > Header Layout > Mobile Menu > Header Mobile Menu activation and choose 990px.
Regards,
YigitHi Yigit
Many thanks for your quick response. I added the following:
@media only screen and (max-width: 1140px) {
and that seemed to be fine, however, when I added
.av-main-nav > li > a { padding: 0 7px; }}
That added the white square into a normal website (not just the mobile site).
I also made the changes to the Enfold theme as per your recommendation, which resolved the iPad problem, but has created another issue and that is top of text on pages being covered by the white menu box. Please see here
http://www.yourmarriagecelebrant.com.au/error/The other issue still remains that it is just a white box and people may not realise that it is a menu. I have done a website for another client with the Enfold theme – http://www.metrocarpetcleaning.com.au and the menu appears as a white box, but with black lines in it, which prompts people to click on it.
Your help with these would be greatly appreciated.
Hey!
Thank you for using the theme!
Not sure why the mobile icon color changed but you can adjust it with this:
#advanced_menu_toggle, #advanced_menu_hide { background-color: #ffffff; color: #333333; border-color: #e1e1e1; }Cheers!
IsmaelAwesome. Thank you Ismael.
We are just about there with resolving the issue.
I have noticed on the iPad, when it is placed landscape (sideways), the regular menu still appears as well as the mobile menu. How do I remove the regular menu, which runs into the logo please, so that only the mobile menu remains?
On the other hand when I stand up the iPad in a portait format, the regular menu is gone and only the mobile menu remains, which is great.
Please see attached screen shots here
http://www.yourmarriagecelebrant.com.au/error/
Thank you very much.
Hi!
Please use this code to hide the menu on ipads:
@media only screen and (max-width: 1140px) { .avia-menu.av-main-nav-wrap { display: none !important; } }Cheers!
PeterExcellent. Thank you Peter. That worked for removing the regular menu
I still seem to have the problem, however of the menu covering the top of the heading on each page. Any ideas on how that can be fixed.
Many many thanks
Ivana
Hi!
On what page is this happening? Please add this on Quick CSS or custom.css:
@media only screen and (max-width: 767px) { .html_header_top.html_header_topbar_active.html_header_sticky #top #main { padding-top: 180px; } }Cheers!
Ismael
- The topic ‘Issues with iPad and iPhone menu display’ is closed to new replies.