-
Posts
-
Hi,
I just purchased the Enfold theme and am starting to migrate my current website over to WordPress. Everything looks good when my browser window is larger, but when I start to shrink it down, the menu starts overlapping the logo. Same thing happens on the iPad. I am trying to figure out how to work around it. Is there a way to get the logo out of the way of the menu so that as the window shrinks it doesn’t have to overlap the logo?
Here is a link to the website:
Hi,
Please add this on your custom.css or Quick CSS to decrease the padding and the font size of the menu on iPad view:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 5px;
font-size: 11px;
}
.logo img {
padding: 30px 0;
width: 150px;
height: auto;
}
}Regards,
Ismael
Im having the same problem, hoping you can provide some direction. I spent about an hour looking at support posts and tried entering in the QuickCSS box as well as altering the avia.js file (from post: https://kriesi.at/support/topic/header-menu-intersecting-with-logo).
my website, http://www.resnnInvestments.com, has the same problem as above.
full screen the top navigation looks great, mobile size it looks great as well, but in between, if you shrink the window there is a huge overlap where the left 2-3 menu items are under the logo and the right menu items get pushed down to cover up the page title. makes it look really bad.
can you help? thank you!
Hey,
Please add this on your custom.css or Quick CSS:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 6px;
font-size: 10px;
}
.main_menu {
margin-right: -50px;
}
.logo img {
width: 140px;
}
}Regards,
Ismael
I just added this to the QUICK CSS, then clicked SAVE ALL CHANGES and tested with no success. It doesnt seem to make any difference. What am I doing wrong? I still have the code above in the QUICK CSS fyi.
actually I want to clarify my previous post, looking at it on an ipad NOW looks great (thank you), but if i take the browser on a desktop computer and make the resolution smaller (768×1024) as an example … or simply make the browser half the screen … the navigation gets all crazy. is there a way to fix that? thank you.
Actually your menu displays just fine for me in Chrome – even when I re-size the menu. I only noticed a small glitch between 1174px and 1160px – you can fix it easily by reducing the menu item padding. Use following css code
.main_menu ul:first-child > li > a {
padding: 0 11px;
}
- The topic ‘menu overlapping logo when resizing browser window’ is closed to new replies.