-
Posts
-
Hey there,
I used the custom CSS that was posted in the FAQ to stop the nav from scaling, which works, but now when scaling down my browser to certain sizes, the responsive menu starts overlapping the logo (my logo is a bit wider than the one used in your demo theme). How can I prevent this from happening?
Here’s a link to the page: http://goo.gl/jGUCw
Thanks,
Tom
Hi,
I checked your website but I don’t see the menu overlapping the logo. Is this happening on an iPad?
Regards,
Ismael
Hi Ismael,
It only happens at certain resolutions when the responsive layout sizes itself down.
Here’s a screenshot of what I’m talking about: http://i.imgur.com/eIZyfXY.png
Thanks,
Tom
Hey!
In your case we probably need to activate the slide out menu earlier. What you can try is to open avia.js in your js folder and search for the line:
if(first_level_items > 8 && !bottom_menu)
Change it to:
if(first_level_items > 5 && !bottom_menu)
This will make sure that the menu gets changed not only on mobile devices but on small screens as well
Hello,
Where is the custom CSS mentioned in the original post?
“I used the custom CSS that was posted in the FAQ to stop the nav from scaling, “
Hi,
I am having a similar problem with an overlapping menu (http://royalcentredentalgroup.ca/wp-content/uploads/2013/06/menuoverlap.jpg) when I tried to change the avia.js file i lost the menu altogether on the ipad (http://royalcentredentalgroup.ca/wp-content/uploads/2013/06/bugattemptfix.jpg).
I just want it to go to the mobile menu immediately before it is about to overlap…
Any help would be great!
Hi,
please try following – open up wp-content/themes/enfold/js/avia.js and replace
switchWidth = 768;with
switchWidth = 1010;and insert following code into the quick css field
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 1010px) {
/*all templates*/
.responsive #header .main_menu ul{display:none;}
/*header*/
.responsive #top #header {position: relative; }
.responsive #top #main {padding-top:0; }
.responsive #main .container_wrap:first-child{ border-top:none; }
.responsive .main_menu{position: static;}
.responsive .logo{position: static; height:80px; float:none;}
.responsive .mobile_slide_out .logo{float:left;}
.responsive .logo img{margin: 0 auto;}
.responsive #header_main .container{height:auto !important; }
.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
.responsive #top .mobileMenu{margin: 0 0 10px 0; width:100%; padding: 10px 4px;}
.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
.responsive #header_meta .social_bookmarks{padding-bottom:2px; width:100%;}
.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
.responsive #top #header_meta .social_bookmarks li:last-child a{border-right-style: solid; border-right-width: 1px;}
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
.responsive #header .social_bookmarks{width:100%; text-align: center; height:auto; line-height: 0.8em;}
.responsive #header_meta .sub_menu>ul li,
.responsive #header .social_bookmarks li{float:none; display: inline-block;}
.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
.responsive #header_main_alternate .mobileMenu{ margin:16px 0;}
.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
}Unfortunately I tried both Kriesi and Dude’s recommendations and neither work. Both simply make the menu disappear at the size where it normally overlaps.
This improved my similar situation, but I can still get both the standard and slide-out menu to show up at the same time, right around 1000px wide ( see https://www.evernote.com/shard/s320/sh/7049d7b5-09da-47bf-bbe7-34d090ae29e2/72785f26afe8d6f1227cf903ecb872a7 ) and then the menu switch seems to kick in a smidgen early — around 980px wide (see https://www.evernote.com/shard/s320/sh/312a4303-1129-498f-9b67-10f2f659a010/0e5fad42bc4dc15336abf533c416c581 ) — before the layout switches to what I’m guessing is the tablet portrait layout.
I realize I’m getting a little nit-picky here, but maybe a slight tweak of the code above can refine this?
Thanks so much,
Sky
You can use a media query to hide the button Eg use:
@media only screen and (min-width: 1000px) and (max-width: 1002px) {
#advanced_menu_toggle{display: none !important;}
}to hide the menu button between 1000px and 1002px. You can insert different dimensions or create severalmedia queries for different resolutions like:
@media only screen and (min-width: 1000px) and (max-width: 1002px) {
#advanced_menu_toggle{display: none !important;}
}
@media only screen and (min-width: 980px) and (max-width: 982px) {
#advanced_menu_toggle{display: none !important;}
}However personally I could not reproduce the issue on your website – it switches the menu when I resize the screen to 1028px – then it hides the button and shows the menu links.
- The topic ‘Menu overlaying logo’ is closed to new replies.