[Resolved] Customizing Mobile Menu

Home Forums Support [Resolved] Customizing Mobile Menu

Home Forums Support Customizing Mobile Menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1658459
    Milos

    Hello,

    This is a continuation from the previous post, as I was asked to break things up into single questions. Generally, my goal was to make the Emerald Theme navigation as elegant looking as GeneratePress, with a few tweaks to accomodate what we’re trying to do on our site.
    https://generatepress.com/forums/topic/customizing-desktop-mobile-menu/#new-post

    The desktop portion of the menu is mostly good, now it’s onto the mobile portion. I’ve attached the mockup of what I’m trying to achieve.

    For Mobile, in the mockup photo, you can ignore the colour scheme (I just took my existing website and tweaked some things in an image editor for illustrative purposes). I just want it to be white background, and styling similar to generatepress.com. I want to get rid of the word β€œMENU”. And then I want to have a smaller logo on the left, just like GP.com. The Major difference on Mobile is I want to put Click to Call Sales (888-XXX-XXXX) with a Phone Icon beside it, and then a Cart Icon beside that.

    The second photo I attached shows the Generatepress menu, vs the Emerald. I was successfully able to get rid of the background hover effects (Customizing > Colors > Off Canvas Panel), however I would like to be able to just make the font and weight to look similar, as it just looks less polished vs what the Generatepress menu looks like.

    Thank you!

    #1658715
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the new site – so i can see what we have so far.

    #1659222
    Milos

    Hi David,

    My apologies. I’ve attached it. As you can see, the mobile menu readability is very tough, compared to GeneratePress site’s which is excellent. Removing the background effects didn’t change that much either – as that issue seems to be the case on the GP’s hosted Emerald theme demo on my devices as well.

    And then there are the customizations after that to make things a bit functionally different than GeneratePress website’s menu.

    #1659261
    David
    Staff
    Customer Support

    No problems πŸ™‚
    TO change the colors of the Mobile Menu go to Customizer > Colors > Off Canvas.

    To add the phone number in the Mobile Header you can use a Block Element:

    https://docs.generatepress.com/article/block-element-overview/

    Set it to Hook > inside_mobile_header and set the Display Rules to Entire Site.

    #1659303
    Milos

    Hi David, thank you, that part works great. Only question with that is, how would I force it to get centered as well? <center> html tags don’t work, and it doesn’t seem to add it as a class for me to attempt to try centering it in CSS.

    #1659390
    Ying
    Staff
    Customer Support

    Hi Milos,

    Which part are you trying to get centered? The click to call part?

    It seems there’re not so much space for it to be moved around on mobile.
    https://www.screencast.com/t/GrNPJYXWu

    Let me know πŸ™‚

    #1659643
    Milos

    Hi Ying, yes, that’s the one. There will be more space once I figure out how to get the login removed on mobile (which I’ll ask in a separate question about how to get that hook to be desktop-only if I don’t figure it out in the next day or two :)).

    I’m planning to play around with the logo width as well as the padding too. And also, depending on the size and orientation of the screen, there is a lot more space in the middle on top of that.

    Thank you πŸ™‚

    #1659704
    Ying
    Staff
    Customer Support

    I see, that make sense
    You could give this CSS a try for mobile:

    @media (max-width: 768px) {
        .inside-navigation center {
            flex: 1;
        }
    }

    Btw the login icon can be disabled at appearance > element > account icon πŸ™‚

    #1661099
    Milos

    Thank you very much πŸ™‚

    #1661104
    Ying
    Staff
    Customer Support

    No problem πŸ˜›

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.