sticky mobile menu - Support | Kriesi.at - Premium WordPress Themes

Viewing 30 posts - 1 through 30 (of 30 total)

Author

Posts
January 17, 2017 at 9:56 am #734608

publidata
Participant

Hi, is it possible to activate a stycky menu for smartphone version? Thank you very much

January 19, 2017 at 8:18 am #735728
Nikko
Inactive Moderator
Hey publidata,

Yes, it’s possible with some custom css codes you need to add on Quick CSS (located in Enfold > General Styling):
```
@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important;
  }

  .responsive #top #main {
    padding-top: 150px !important;
  }
}
```
You might need to adjust the padding-top value. Let us know if this helps :)

Best regards,
Nikko
January 20, 2017 at 10:46 am #736335

publidata
Participant

Hi, first of all thank you very much.

it is ok, but is it possibile to see on mobile just the row with the logo and the menu (without top header)?

In this way it take too much space in the page on smartphone.

I would like that on mobile appears top header and the row with logo and menu, but when scrolling just the row with logo and menu for a better usability of the website.

I’ll wait your answer. Thank you.

Regards

January 24, 2017 at 7:31 am #737562
Ismael
Moderator
Hi!

Please add this css code inside the css media query.
```
#header_meta {
    display: none;
}
```
Regards,
Ismael
January 24, 2017 at 9:55 am #737626

publidata
Participant

where can I find css media query?

January 25, 2017 at 5:02 am #738090
Rikard
Keymaster
Hi,

The media query is what is wrapping the code here, first and last row. Try this instead:
```
@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important;
  }

  .responsive #top #main {
    padding-top: 150px !important;
  }
  
  #header_meta {
    display: none;
  }
}
```
Best regards,
Rikard
January 25, 2017 at 9:48 am #738217

publidata
Participant

ok, thank you, but where to add this code? In Enfold > General Styling? Thank you

January 25, 2017 at 10:52 am #738257

Basilis
Inactive Moderator

Hey!

Yes, you can add it to the Custom CSS field to make it work.
Thank you

Best regards,
Basilis

January 25, 2017 at 11:02 am #738266

publidata
Participant

it seems to be ok
thank you very much
best regards

January 26, 2017 at 6:17 am #738722

Rikard
Keymaster

Hi,

Great, glad you got it working :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

February 1, 2017 at 10:03 am #741110

publidata
Participant

Hi, the website has been published. You can find it to http://www.agriturismoeucaliptus.com

As you can see in the mobile version I don’t see the menu with social icons, telephone number and flags of the languages, but just the sticky menu.

I would like to see the sticky menu only when the user scroll, for a better usability via mobile.

Is it possible? Thank you very much

February 4, 2017 at 9:29 am #742736
Nikko
Inactive Moderator
Hi,

Try adding this css code in Quick CSS:
```
.responsive #top #wrap_all #header {
    position: fixed !important;
}
```
Hope this helps.

Best regards,
Nikko
March 20, 2017 at 1:38 pm #763635

andrzejkozdeba
Participant

Hi Guys,

I don’t want to open new topic because my issue is the same: sticky header on menu.
I tried with codes from this topic and from topics:

Sticky header for smart Mobile phone

Mobile sticky menu

but it doesn’t work (or I can’t see it on Safari).
There is link to my website (prv content).

Would appreciate some help :)

March 23, 2017 at 6:38 pm #765645
Victoria
Inactive Moderator
Hi andrzejkozdeba,

Try adding this css to you enfold/custom.css or in Quick css:
```
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header.header-scrolled  {
        position: fixed;
    }
}
```
Let us know if this was helpful.
Best regards,
Victoria
March 23, 2017 at 7:04 pm #765669

andrzejkozdeba
Participant

Dear Victoria,
It works on tablet (I checked Chrome and Safari on iOS) but it doesn’t work on smartphones (i checked on Android and on iOS)

Could you tell me also how can I activate it on smartphones also?

Best regards,
Andrzej

March 24, 2017 at 6:36 am #765918
John Torvik
Inactive Moderator
Hi,

Sometimes, another rule may be replacing this rule, so, try to use the !important after the rule, like this:
```
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header.header-scrolled  {
        position: fixed !important;
    }
}
```
Best regards,
John Torvik
March 24, 2017 at 9:32 am #766000

andrzejkozdeba
Participant

Dear John,
Unfirtunatelly this rule also works only on tablets and do not work on smartphones.
:(

March 25, 2017 at 10:16 pm #766751
Victoria
Inactive Moderator
Hi andrzejkozdeba,

Try this css:
```
@media only screen and (max-width: 767px) {
    .html_header_top.html_header_sticky #header {
    	position: fixed !important;
     }
}
```
Let us know if this was helpful.
Best regards,
Victoria
March 26, 2017 at 2:19 pm #766940

andrzejkozdeba
Participant

Dear Victoria,
Still the same: this rule also works only on tablets and do not work on smartphones.
:(

March 27, 2017 at 6:34 am #767210
Nikko
Inactive Moderator
Hi,

This part of the code that John and Victoria gave should work only on mobile devices but won’t have any effect on tablets, can you please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Nikko
March 27, 2017 at 9:52 am #767279

andrzejkozdeba
Participant

OK, thanks.

March 27, 2017 at 4:03 pm #767522
Victoria
Inactive Moderator
Hi andrzejkozdeba,

I advise you to put the css not in Quick Css but in theme/enfold/css/custom.css, when code is added there it will work.
```
@media only screen and (max-width: 767px) {
    .html_header_top.html_header_sticky #header, .responsive #top #wrap_all #header {
        position: fixed !important;
     }
}
```
Let me know if it worked.

Best regards,
Victoria
March 27, 2017 at 4:23 pm #767540

andrzejkozdeba
Participant

It works!

Thank you so much <3!

March 28, 2017 at 1:20 pm #768105

Victoria
Inactive Moderator

Hi andrzejkozdeba,

Glad we could help! :)

If you need further assistance please let us know.

Best regards,
Victoria

August 9, 2017 at 12:36 am #836093

3adconsulting
Participant

Hi Guys,
I have a follow up question related to this subject that I can’t seem to find an answer for anywhere else…

I have applied the suggested code above for my header, and it works but would like to know how to apply this to a sub-menu on mobile as well? I have tried different variances, but nothing seems to work….

Thanks in advance,

August 12, 2017 at 4:54 pm #837949

Victoria
Inactive Moderator

Hi 3adconsulting,

I am not sure I understand. Could you please attach a mockup of what you’re trying to achieve? And a link to your website?

Best regards,
Victoria

August 14, 2017 at 6:00 pm #838840

3adconsulting
Participant

Hi Victoria,

My apologies for not being clearer. The website is http://www.cre8vitality.com, when it is viewed on a mobile screen only the header menu stays fixed at the top of the page when a user scrolls down. But due to the amount of information on my product pages I would like the submenu to stay fixed to the top of the page as well (below the header menu) when the user scrolls down. Like it currently does when viewed on desktop screen sizes….. https://www.cre8vitality.com/product/multiflora25/

Here are some screenshots when viewed on a desktop:

Here it is when viewed on a smaller screen:

Here are the settings selected for the submenu:

Thank you in advance for your help with this,

Kind regards,

August 17, 2017 at 6:16 am #840236
Ismael
Moderator
Hi,

Thank you for using Enfold.

Please add this code in the Quick CSS field.
```
@media only screen and (max-width: 767px) {
    .responsive #top .header-scrolled-full + #main .av-submenu-container {
        top: 81px !important;
        position: fixed !important;
        height: auto;
        min-height: 0;
        margin-bottom: -1px;
     }
}
```
The top value depends on the height of the mobile header. Also, you might want to limit the number of sub menu element to one per page.

Best regards,
Ismael
August 21, 2017 at 6:23 pm #842149

3adconsulting
Participant

Hi Ismael,
Thanks so much for your help! This is great and greatly appreciated! :)

August 22, 2017 at 8:20 am #842358

Ismael
Moderator

Hi,

Great. Let us know if you need anything else.

Best regards,
Ismael
Author

Posts