Menus on mobile devices

This topic has 6 replies, 2 voices, and was last updated 9 years, 12 months ago by Sakin.

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

Author

Posts
November 13, 2014 at 7:37 pm #47420

fmck718
Participant

Hi,
Love the Catch Everest theme. It is very easy to use, and looks great.

I’m hoping you can help me figure out three issues I’ve encountered with menus on mobile devices.

Here is my site – http://sorrows.wpengine.com/
It’s ‘live’, but not ready for primetime yet.

1. I added a top menu above the logo within the Header Top Sidebar widget. I feel that it’s necessary for my desktop audience, but on mobile phones, it looks out of place. Is there any way to hide this menu on mobile phones?

2. On mobile phones, each menu shrinks down to a bar called “Menu.” Is there a way to rename these (e.g. “Main Menu”, “Quick Links”, etc.)?

3. My main menu has 8 categories, and each category will have a number of pages within it. On mobile phones, all pages display when you click on “Menu”. However, I don’t want users to have to scroll through dozens of items to find a particular page. Is it possible to have the sub-menus for each category activate ‘on-click’ instead of automatically displaying?

Thank you for your help.

November 13, 2014 at 10:08 pm #47429
Sakin
Keymaster
@fmck718:
1. You can hide it by adding in the following css in “Appearance => Theme Options => Custom CSS” box.
```
@media screen and (max-width: 767px) {
#header-top .widget.widget_nav_menu .sb-holder { display: none; }
}
```
2. Sorry there is no option at this stage, we might be able to add it in future version update.

3. We had issue making in open and close in mobile devices due to various number of touch devices. So, we make it all open. I check in your site and from my mobile the experience is pretty good. Sorry, no option for this as well. You might need to consider hiring some customizer to work on it.
November 14, 2014 at 2:20 am #47458

fmck718
Participant

Fantastic. Thank you very much for the info. Related to question #1, is it possible to hide the “Homepage Featured Content” section on mobile phones as well? (Same issue as above – I think this section works well on desktop, but it’s a lot of info to read on a mobile phone.)

Thanks again.

November 14, 2014 at 6:03 am #47472
Sakin
Keymaster
@fmck718: Ok then replace the following previous css that I gave you
```
@media screen and (max-width: 767px) {
#header-top .widget.widget_nav_menu .sb-holder { display: none; }
}
```
With the following css:
```
@media screen and (max-width: 767px) {
    #header-top .widget.widget_nav_menu .sb-holder,
    .home #featured-post {
        display: none;
    }
}
```
November 14, 2014 at 11:20 am #47485

fmck718
Participant

Thank you very much!

November 21, 2014 at 4:57 am #47844

fmck718
Participant

Hi Sakin,
I’m not sure why, but the “Homepage Featured Content” section (which you helped me hide last week) has now reappeared on mobile phones. I don’t believe that I’ve modified anything related to that, but do you have any suggestions for how to fix? (My site is sorrows.wpengine.com)

Thanks.

November 22, 2014 at 8:07 am #47895
Sakin
Keymaster
@fmck718: No sure about that. Maybe you are looking from different size of mobile devices. In that case you might want to increase the width. So, replace your current css
```
@media screen and (max-width: 767px) {
    #header-top .widget.widget_nav_menu .sb-holder,
    .home #featured-post {
        display: none;
    }
}
```
With the following css:
```
@media screen and (max-width: 768px) {
    #header-top .widget.widget_nav_menu .sb-holder,
    .home #featured-post {
        display: none;
    }
}
```
Author

Posts