Thread Starter
sgumby
(@sgumby)
Additionally it looks like the body class ast-header-break-point effects the non mobile nav layout on smaller screens. And again the javascript seems to remove this class once it loads…..but for a split second it can make the main nav look really goofy.
Here are a few css rules that are being effected by this. I’m sure there are more.
.ast-header-break-point .main-header-menu {
background-color: #f9f9f9;
border-top-width: 0;
}
.ast-header-break-point .main-navigation .stack-on-mobile li {
width: 100%;
}
Thread Starter
sgumby
(@sgumby)
Sorry for so many posts….I’m just throwing this as I find stuff.
These rules seem to fix the problem for me. I’ll post more as I find them.
.ast-header-break-point #ast-mobile-header {
display:none;
}
.ast-header-break-point .site-navigation #ast-hf-menu-1.main-header-menu {
background:none !important;
}
.ast-header-break-point .site-navigation #ast-hf-menu-1.main-header-menu > li.menu-item {
width:auto !important;
}
Hi @sgumby,
I have checked it on my end and it appears that the mobile menu is working fine here. Refer to this screencast, please. However, the toggle button doesn’t function as I have disabled the JavaScript and it requires JavaScript to function.
Regarding the second query, can you please elaborate on non-mobile navigation layouts on smaller screens? I am not sure if I get the exact device you are referring to here.
Let me know if I missed anything.
Kind regards,
Aradhy 😊
Thread Starter
sgumby
(@sgumby)
I think you are missing the error. The menu works fine once everything loads. The problem is the menu loads as visible for a split second and then hides as the javascript loads. And I’ve proven this by turning off javascript in the browser as the page loads.
You seem to have 2 break points. ast-header-break-point shows up as a class at around 1200 or 1170 I think. However the mobile menu doesn’t start until about 921 I think. Its been a week now. This site is “done” and almost ready to go live so I’d rather not deconstruct it to show you screen shots.
I have an idea how to “hack” your theme to fix it better then my initial fix and so I’m using it for an other site that I’m working on this week. I’ll try to send you screen shots to help illustrate. But for the privacy of my client I’d rather not post them here publicly. Is there somewhere that I can send them privately?
Thread Starter
sgumby
(@sgumby)
I’ve spent some more time with this today. I have some screenshots but maybe I can explain this with out.
I think that what’s happening is you have a class (ast-header-break-point) that is in the body tag by default that then gets removed by a javascript. This class seems to be meant to effect the layout of the mobile menu. But because of the selectors you are using it is also effecting the non-mobile nav by adding backgrounds, line-heights of 3, changing the non-mobile menu’s li tags to a 100% width which stacks them vertically, etc…….
Possibly if you change every selector that has ast-header-break-point to include #ast-mobile-header that would solve the problem.
Hi @sgumby,
I am sorry but I am still not able to get the exact issue. Maybe it will be better if you can reach out to us via our Support Portal with the screenshots. Also, we respond faster there.
Feel free to mark this thread as Resolved once you open the ticket.
Kind regards,
Aradhy 😊
