-
Posts
-
Hey guys
I have the usual menu overlap issue. Tired everything to make the slide-out menu appear between 768px and 989px but no combination of CSS fixes or adjustments to avia.js will fix it.
All I have is overlap which looks bad. I cannot shrink the menu down any more than I have so is anyone able to give me a definitive fix for showing the small box icon between these pixel ranges instead of an overlapped menu?
Spent three hours trying to fix this and will have to abandon the theme if I cannot fix this :(
My test URL is http://www.swareztest.com/modern-art-paintings-for-sale/jewell/
Interestingly the square responsive icon appears around 775px then mysteriously disappears again…
Hope someone can help
Yours despairingly
Ed
Hey,
Do you mind decreasing the size of the logo on 768px screen width? You can add this on your custom.css or Quick CSS:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_slide_out .logo {
float: left;
width: 200px;
margin-top: 20px;
}
}This is what it will look like:
Regards,
Ismael
Thanks Ismael
Unfortunately that has done nothing :( thankyou very much for your suggestions…
Added the CSS to custom.css – no change. Shrunk the logo png to 200px x 67px – no change… I wonder if I need to re-install the theme again… I have no change to anything except the logo is a bit smaller.
As soon as I shrink the browser to 989px the menu still overlaps and stays that way until 767px… Really am losing the will to live… The Enfold Demo is perfect between these values and there’s just as much space taken up with menu items from what I see… Why can’t mine be the same? It should be!
Thanks again for your help; any further suggestions are welcome if you have time :)
Thanks
Ed
http://www.swareztest.com/wp-content/themes/enfold/Untitled-1.jpg
Hi Ed,
With your caching plugin installed and running you definitely wouldn’t see any change to your css immediately. You need to flush the cache and then disable the plugin while you are making adjustments.
Regards,
Devin
Hey Devin
Thanks for the advice; W3TC is deactivated and all caches were flushed beforehand (and indeed after every change anyway – including short life header expires).
The link is live now with a deactivated plugin and a browser cache clear. Still the same problem. In fact the logo just got massive on IE10… another problem to be dealt with.
The code from Ismael moves the logo but the menu remains no matter what and still the responsive box fails to appear. I have even copied the entire custom CSS file of Kreisi’s demo to see if I can find something in there but I cannot so this is causing me a huge problem; is there anything you can suggest my friend? Thanks in advance. This may cause me to abandon the theme as 45% of my traffic is on an iPad so I ave to get this right before I continue. The demo does it so a fresh install should too. I’m beginning to feel disappointed…
Regards
Ed
What version of iPad is this happening on? I just did a quick test of the site with ipad2 and 3 and had no menu overlap issues.
The typical solution I suggest for menu overlap issues is to just adjust the switch width value. See: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320
Upping it to 780px for instance to ensure it switches even before the ipad width may be what you are after if it is still causing issues on your end.
Hi Devin
Thanks for your time…
It’s happening on iPad 2 and iPad 4.
I’ve used the code in the post you mentioned (thankyou) but raised the numbers to 980 on both values. Right or wrong it would seem that I may now have a square fly-out menu icon when the iPad is rotated.
I will approach with caution and hope that it is OK now.
Thanks for your time; hopefully I won’t have to hassle you again :0)
Regards
Ed
- The topic ‘Ipad Resposnvie Menu not working’ is closed to new replies.