-
Posts
-
Hello,
We have:
– logo middle, menu below
– a slim header size
– a sticky, shrinking header
– mobile menu activated for smartphones & tabletsWhen using a sticky full width submenu (mobile: show full menu),
– on iphone (7): no sticky header (ok, mentioned in settings) – submenu not sticky (can live with that) – positioning with anchor OK
– but on iPad (2): sticky header, but not shrinking (can live with that) – submenu sticky – positioning with anchor not OK as the titles disappears “under” the menu’s on topURL: http://181.224.130.241/~debacker/diensten/ (dev URL).
Thanks for letting me know how to solve this (especially the positioning when using the submenu anchors
Best regards,
JurgenHey Jurgen,
The link says 403 forbidden. Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi Victoria,
Thanks for checking. In the mean time, the site is live via https://www.debackerkristof.be …
Please find the credentials below to investigate (but be careful as this is a live website).Best regards,
JurgenHi Jurgen,
Let’s try adding this code to the file themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { .html_header_top.html_header_sticky #header, .responsive #top #wrap_all #header { position: fixed !important; } }and the you tell me what issues you still have, ok? :)
Best regards,
VictoriaHi Victoria,
Unfortunately that does not solve the positioning issue and it even makes it worse as the title is now “behind” the header on all pages. Screen shot from homepage: https://www.dropbox.com/s/ilt368k0kqfzwjl/2017-03-28%2014.58.47.png?dl=0 . I removed the CSS instructions again.
The solution I am looking for is for the anchor positioning, as explained in my initial post.
Thanks for checking & best regards,
JurgenHi Jurgen,
I’m sorry, I don’t understand what do you mean by “positioning with anchor”. Could you give us a mockup of how you would want it to look like?
Best regards,
VictoriaHi Victoria,
This is the back end of the page. As you can see, the color section got an ID.: https://postimg.org/image/w0skez3zj
The full width submenu contains links to the sections of the page (= anchor hrefs). On laptop all goes fine (screen shot with OS X Safari – you can see the anchor I clicked on in the address bar => #isolatie): https://postimg.org/image/t7zcuy3n3
On iPhone (Safari iOS X) the main & sub menu are not sticky, which is acceptable. The section goes fine: https://postimg.org/image/y7wt2w99r
On iPad (Safari iOS X) both menus are sticky but the section is not showing as it should be: the title is behind the menu, so the anchor positioning is going wrong there: https://postimg.org/image/vf3liv8xb .
Hopefully you understand my issue now :o)
Thanks for checking & best regards,
JurgenHi,
Please add the following code in the Quick CSS field.
@media only screen and (max-width: 1024px) { .responsive #top .av-submenu-container { top: auto !important; position: relative !important; height: auto; min-height: 0; margin-bottom: -1px; } }It will disable the “Sticky” option of the submenu element on tablet screens.
Best regards,
IsmaelIsmael,
I´ve used your above code to get the full width sub-menu to stick to the top of the screen for the ipad in landscape mode but it´s having no effect. The menu shows up in the correct place on the page but just scrolls up past the top of the page like the rest of the page contents and doesn´t stick.
I got round this problem for smaller screens with the burger menu by making the menu stick to the top from page load (which isn´t ideal but I can´t find a way to get it to respond the same on mobile screens as it does on larger screens) with the following css:
@media only screen and (max-width: 479px) {
.responsive #top .av-submenu-container {
position: fixed !important;
top: 120px !important;}
#top .av-subnav-menu > li > a {
font-size: 11px;
color: #56882d!important;
font-weight:700 !important;}
#top #av-custom-submenu-1 .av-menu-button > a .avia-menu-text {padding: 4px;}
#top .av-subnav-menu > li {margin: 0px 0px 0px 0px;}
}@media only screen and (min-width: 480px) and (max-width: 990px) {
.responsive #top .av-submenu-container {
position: fixed !important;
top: 120px !important;}
#top #av-custom-submenu-1 .av-menu-button > a .avia-menu-text {padding: 4px;}
#top .av-subnav-menu > li {margin: 0px 10px 0px 10px;}
}I added your above code for ipad landscape mode with the adjustment as follows:
@media only screen and (min-width: 991px) and (max-width: 1024px) {
.responsive #top .av-submenu-container {
top: auto !important;
position: relative !important;
height: auto;
min-height: 0;
margin-bottom: -1px;}
}but it´s had no effect. Any ideas? The page that the problem is occuring on is below!
Thanks for your help!!
Hi,
Sorry for the late response. I almost forgot what we are dealing with here. I don’t see any full width sub menu in the “pro-area” page and the screenshots are no longer available. Please provide the screenshots again.
Best regards,
IsmaelIsmael,
Thank you for your response. I´ve just written a long response to say what was going wrong and then as I went on the iPad to get some screen shots it´s working!!!
I haven´t got your code above in the css but it´s working anyway so that´s great. I think the problem was that it doesn´t stick straight away. The page has to stop scrolling and then the menu appears at the top and then scrolls with the page. I was obviously not stopping the page previously and giving the menu the chance to then appear!!
Thanks for your help!!
Best regards
- You must be logged in to reply to this topic.