- This topic has 11 replies, 2 voices, and was last updated 6 years, 1 month ago by David Calderwood.
Tagged: Mobile Menu
- AuthorPosts
- September 6, 2018 at 3:51 pm #10456
David CalderwoodParticipantAndrew, on the mobile menu, my client doesn’t want the hamburger icon but wants a text menu, but I don’t see how I can replace it with the mobile version. I see that there is a “mobile-menu-button span” in the CSS and a “mobile-menu-button” display none. I assume that I need to update the header code but not sure what it is pulling.
I am currently pulling the main menu and added some css to make it smaller, but it doesn’t display correctly on mobile, I really need to make the main-navigation display the mobile menu drop down on mobile without the icon. https://completefireplacenj.com/
Thanks
September 6, 2018 at 6:09 pm #10458
Andrew MisplonKeymasterHi David
Thanks for reaching out. You can try something like:
You can go here: https://pastebin.com/raw/s2zL0jVq and insert that function into your child functions.php file.
In your child style.css file insert:
#mobile-menu-button { width: auto; }
You can then customize
.mobile-menu-text
as required.Hope that helps 🙂
September 6, 2018 at 9:49 pm #10460
David CalderwoodParticipantI added the code and changed my text, but it appears that the mobile code is being pulled from somewhere else as only the span icon is displaying. I added a meta to the child header file to confirm that was the header being pulled, but the nav is coming from somewhere else. To confirm, I delete all nav code from the child header file, deleted the complete parent header file then refreshed and the original mobile nav code was still there. I have no caching. Here is the lines at the beginning and end of the nav (skipped the middle lines for space):
<aside id="nav_menu-3" class="main-navigation widget widget_nav_menu"><div class="menu-main-top-menu-container"><ul id="menu-main-top-menu" class="menu"><li id="menu-item-298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home page_item page-item-12 menu-item-298"><a href="https://completefireplacenj.com/">Home</a></li> <li id="menu-item-353" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-353"><a href="https://completefireplacenj.com/blog/">Blog</a></li> </ul></div><a href="#menu" id="mobile-menu-button"><span></span><span></span><span></span><span></span></a></aside> </div> </div><!-- .polestar-container -->
I also tried pasting the function code directly into the parent function just to be sure it wasn’t a child problem, but no luck.
September 6, 2018 at 9:53 pm #10461
Andrew MisplonKeymasterFor this to work, the mobile menu would need to be enabled. At
Theme Settings > Navigation
is the Mobile Menu setting enabled? And is theMobile Menu Collapse
setting set to at least 480 or higher?Put another way, this function just deals with changing the menu icon to text. For it to be functional, the menu icon would need to initially be showing before the function is used in the child theme.
September 6, 2018 at 10:01 pm #10462
David CalderwoodParticipantI had the mobile menu set at 768 – does it need to be lower?
September 6, 2018 at 10:03 pm #10463
Andrew MisplonKeymaster768 is perfect.
Is the Mobile Menu enabled? If so, any idea why it isn’t displaying? If you switch to the parent them, does the mobile menu work?
September 6, 2018 at 10:07 pm #10464
Andrew MisplonKeymasterThe issue might be everything being contained a Layout Builder. There is code in the premium plugin that looks for a menu widget in the header sidebar and then applies the same code as though it was a regular menu. I’m not sure that can happen in Layout Builder.
September 6, 2018 at 10:08 pm #10465
Andrew MisplonKeymasterSo if you have the energy to recreate the header outside of a Layout Builder, I can help with achieving the same alignment. Put another way, this should all work if you had say two Editor widgets and a Menu widget.
September 6, 2018 at 10:19 pm #10466
Andrew MisplonKeymasterI have to head out for the night, sorry about that. If you had to redo the header without the Layout Builder I could send a snippet to shift the widget width percentages. But we could wait until tomorrow if that works better, I’m at GMT+2. Thanks 🙂
September 6, 2018 at 10:23 pm #10467
David CalderwoodParticipantFIXED – my error. I just remembered that when my client wanted to lose the hamburger icon on the mobile, I replaced the header menus with a custom nav menu in the header widgets. That’s why the header code wasn’t working and why I was seeing it pull code from somewhere else – the widget.
Thanks for the GREAT support. All is working now.
September 6, 2018 at 10:27 pm #10468
Andrew MisplonKeymasterSuper, really glad to hear that!
(If a Menu widget is inserted into the header area and is not contained in a Layout Builder, it should also convert normally to a mobile menu.)
All the best. Cheers.
September 6, 2018 at 10:43 pm #10469
David CalderwoodParticipantThanks. Enjoy your evening. Time for me to go home.
- AuthorPosts
You must be logged in to reply to this topic.