Why is the full menu appearing on my mobile device rather than the typical 3 line drop

Hi,
When I view the site on my mobile device (Samsung Galaxy S6), the full menu shows rather than the typical 3 line drop down button which can then be expanded. Why is this happening and how can I resolve this issue?

I look forward to hearing from you.

Sincerely,
Kimberly

    Predrag Dubajic

    Hey Kimberly,

    Not sure if you're referring to Burger icon size here or to width of the menu once open.

    Either way, for increasing width and height of Burger icons you can use this CSS code and adjust the values to your liking:

    div.responsive_nav_toggler > div {
        width: 26px;
        height: 4px;
    }

    If you want to increase the actual menu so it takes full width add this CSS code:

    div.upfront-navigation div.upfront-navigation[data-style="burger"][data-burger_alignment="right"] ul.menu {
    	width: 100%;
    }

    Hope this helps

    Best regards,
    Predrag

    Kimberly Cohen

    Hi,
    Thank you for providing me with the codes. I tested the first because my goal was to increase the overall size and width of the 3 bar navigation icon for mobile phones. Unfortunately when I updated the Custom CSS and increased the width to 50px and the height to 10px, it resulted in a black circular navigation icon. So, I deleted the Custom CSS and updated the settings.

    I then decided to just change the mobile navigation setting to vertical rather than horizontal. It appeared to work well except that the button for the Calendar page which is a sub-page of the Events page kept swinging out to the right and couldn't be reached so I then centered the vertical navigation setting and saved the change. Unfortunately, in doing so the Calendar sub-page then opened up on top of the page listed just below it. So, I moved the Calendar page so it became part of the main navigation. This worked well so I decided to make a few updates to the Responsive Mobile settings for the Contact Us page. It appeared that the changes in the navigation settings I made to the Home page were carried over to the Contact Us page. I was happy with the results except when I tested the site again on my phone and on my laptop in responsive mode for mobile phones, the black circular button appeared on all the pages except for the Home and Contact Us page. (See screen captures) In addition, instead of the Main menu appearing horizontal on my laptop when not in responsive mode it was appearing vertically. When I tried to correct the issue, I received the following message "A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue. Script: http://blackmothersunited.org/…t/themes/upfront/build/main.js:49"

    I was finally able to resolve the issue with the main navigation on the Home and Contact Us pages in normal mode so that the navigation menu is horizontal. However, only those two pages show the Calendar page in the main menu (See Home page screen capture) whereas all the other pages still show it as a sub-menu item (See Events page screen capture).

    What steps do I need to take to resolve this?

    I look forward to hearing from you soon!

    Sincerely,
    Kimberly
    [image pos="1"][image pos="3"]

    Adam Czajczyk

    Hello Kimberly!

    I've visited your site and tested it in a "full" (desktop) view and two responsive modes (that would match Upfront's "tablet" and "mobile" views). In all cases the menu included the same elements for me: about us, let's talk, our events, calendar, testimonials, contact us.

    I navigated through the pages and it was the same for each and every page. That said, do you have any caching plugin enabled on your site (e.g. W3 Total Cache or similar)? If so, could you please try clearing site's cache and your browser's cache?

    If this doesn't help, let me know please if you can observer the issue using resized browser window, browser's "responsive" view or a mobile device (or any combination of them). If it's only a mobile device - is it any specific one?

    Please advise!
    Best regards,
    Adam

    Kimberly Cohen

    Hi Adam,

    Thank you for your help and questions. The mobile device I am using is Samsung Galaxy S6 and I've cleared the cache each time before viewing the site.

    After you provided feedback, Predrag took another look at the site and made some adjustments. He's got everything to work perfectly. So no more issues! Hurray!

    Thank you again!
    Sincerely,
    Kimberly

    Milan

    Hello Kimberly Cohen

    Hope you are well today and thanks for asking us.

    Glad to hear that your issue has been sorted now. I am marking this thread as resolved one and you do not need to reply me back here. If you in case issue comes up again, you are free to reopen this thread. Otherwise please do open new thread for other issues.

    We are happy that you are with us. Enjoy WPMU DEV.
    Cheers,
    Milan