-
Posts
-
Hi there!
When I resize my browser window to check if everything is viewing properly (this theme is responsive after all) the menu sometimes go underneath the logo.
The intersection occurs in the 2nd picture.
http://imgur.com/6UeupWG,O1OjbdY,iCiNAsl#0
http://imgur.com/6UeupWG,O1OjbdY,iCiNAsl#1
http://imgur.com/6UeupWG,O1OjbdY,iCiNAsl#2
This is a test website which I’m, completing so apologies for information being missing :)
There are a few ways you can go about doing that, I have had good results by combining these two solutions
Try changing your switchwidth to a higher number so it changes to the mobile menu before it overlaps
https://kriesi.at/support/topic/making-the-responsive-dropdown-menu-appear-at-larger-resolutions
Near the bottom (Post 6)
Hi,
@juganrising: Thanks for the help. :)
@marjan2k: You can follow the links to fix the issue.
You can also add this on your custom.css or Quick CSS to fix the ovarlapping menu issue.
/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
@media only screen and (max-width: 1138px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 6px;
font-size: 12px;
}
}Regards,
Ismael
Hi Ismael,
Your code fixed the header a little bit.
1) Meaning when I’m viewing at full screen everything is normal.
2) I shrink a bit, the spacing between the header titles gets smaller to avoid the overlapping with the logo. This is what your code did and it solved the overlapping problem.
3) Then if I shrink a bit more, the titles start overlapping with the logo again.
4) After a little more shrinking then it finally goes into mobile view.
Is there a way to make the logo be at center top and the header titles be under the logo at step 3? I think that would be the best solution to fix this problem because if we decrease the space between the titles anymore it would look like a single line then.
Hi marjan2k,
Centering and moving the elements around is not an easily possible solution. The best would be to just change when the menu changes to the mobile menu if your menu items are that wide.
So in your theme files, open the js>avia.js file. Look for this function:
var menu = header.find('.main_menu ul:eq(0)'),
first_level_items = menu.find('>li').length,
bottom_menu = $('html').is('.bottom_nav_header'),
switchWidth = 767;and change the 767 number to something a bit bigger so the mobile menu takes effect at the screen width you are seeing the overlap. You can try 800, 850, 900 etc until you get the effect and result you want.
Regards,
Devin
Hi Devin,
I was having the same problem and used this fix. However for some strange reason, now both menus appear on my ipad with the original menu overlapping the logo and the mobile menu overlapping that menu on the far left. Any ideas?
Hi,
Please examine the very bottom of Devin’s answer. The only way to determine the exact point is through experimentation. If 767 does nothing, try 790. and go back and forward on those number until you find the exact width where the media query makes the change.
===
I just took measurements, and your mobile navigation activates on 950px but the regular navigation deactivates on 767
You need to open /js/avia.js and make sure that *both* lines 85 and 89 look like this
switchWidth = 767;if you want to use a different number, no problem, just make sure both of the lines always have the same value, don’t just change one.
Thanks,
Nick
- The topic ‘Header menu intersecting with logo’ is closed to new replies.