Ismael,

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

Victoria,

I´ve put the sticky main menu code back in as this is what I want on all pages so the submenu now can´t be seen unless I adjust your top: 0 to top:120. However, as I say what I´m after is for the submenu to appear further down the page (where it is positioned) and for it to stay fixed in that position in relation to the page rather than the screen (as it does on larger screens) and then for it to stick to the top when it reaches the top of the page.

Is this a possibility?

Many thanks again!

Victoria,

I´ve played around with this code and found that the following has worked great. I´ll leave the code here in case it helps someone else:

@media only screen and (max-width:767px) {
#top .flex_column.av_one_half.av-half {
margin-left: 6% !important;
width: 47% !important;}
#top .flex_column.av_one_half.first.av-half {
margin-left: 0 !important;}
#top .flex_column.av_one_half.av-half {
width: 45%;
float: left;
display: inline-block!important;}
}

Many thanks again!!

Victoria,

Thank you for your help however 2 things:

1. The submenu is now not being shown as it is being hidden behind the main menu as I have the main menu sticking to the top with the following code:
@media only screen and (max-width:767px) {
#top {padding-top: 112px !important;}
.responsive #top #wrap_all #header {
position: fixed;
top: 0;}
}

2. I tried taking the above code out so that the main menu was no longer sticky but the submenu then just stuck to the top from the beginning of the page loading.

What I´m after is for the submenu to appear further down the page (where it is positioned) and staying fixed in that position in relation to the page rather than the screen (as it does on larger screens) and then sticking to the top when it reaches the top of the page.

Would that be possible?

Thanks so much again!!

Hi guys,

This code works great to make the full width submenu stick to the screen on smaller screens but its sticking to the bottom of the screen from the top of the page. I´ve tried changing the “top” number to “120px” instead of “565px” which makes it stick to the bottom of the main menu but I´d like it to stick to the top of the page as you scroll down past it like it does on the large screens.

Any suggestions on how I can modify it for this to happen. Please see the page below.

Many thanks again

Victoria,

Thanks very much. Is there any update yet?

Thanks again!

Hi guys,

I´ve used the code above:

@media only screen and (max-width:767px) {
#top {padding-top: 112px !important;}
.responsive #top #wrap_all #header {
position: fixed;
top: 0;}
}

which works perfectly on mobile screens but when I alter the 767px to 990px to get it to work on the ipad burger menu it has no effect!!? Any suggestions on what I can do to get the same effect on ipad portrait (max-width 990px screens) would be awesome.

Thanks in advance

Victoria,

Do you have the code for my question above re: the padding around the words on full width submenu?

Many thanks