Support/Polestar Theme/Change hamburger ICON to text

[Resolved] Change hamburger ICON to text

Tagged: 

  • Author
    Posts
  • September 6, 2018 at 3:51 pm #10456

    David Calderwood
    Participant

    Andrew, 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 Misplon
    Keymaster

    Hi 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 Calderwood
    Participant

    I 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 Misplon
    Keymaster

    For this to work, the mobile menu would need to be enabled. At Theme Settings > Navigation is the Mobile Menu setting enabled? And is the Mobile 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 Calderwood
    Participant

    I had the mobile menu set at 768 – does it need to be lower?

    September 6, 2018 at 10:03 pm #10463

    Andrew Misplon
    Keymaster

    768 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 Misplon
    Keymaster

    The 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 Misplon
    Keymaster

    So 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 Misplon
    Keymaster

    I 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 Calderwood
    Participant

    FIXED – 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 Misplon
    Keymaster

    Super, 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 Calderwood
    Participant

    Thanks. Enjoy your evening. Time for me to go home.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Scroll to top