[Resolved] Customizing Desktop/Mobile Menu

Home Forums Support [Resolved] Customizing Desktop/Mobile Menu

Home Forums Support Customizing Desktop/Mobile Menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1655204
    Milos

    Hi there, I don’t quite know where to start, so I guess I’ll give a bit of a background. I started the site with the Emerald Template, purely because I am building a commerce site, and I just want the site to not have a “wrapper” vertically, but to look infinitely wide. The content, front page, etc, I am going to make using GenerateBlocks, and I have a good grasp of how to do it (lots of decent Youtube tutorials).

    The part I am struggling with is making the header/menu the way I want it. What I am now trying to do is make the Desktop/Mobile menu similar to the generatepress.com menu in style – Font, Color, the way the mobile menu looks, etc – I think it’s very sharp, clear, to the point.

    The differences are (I’ve attached the mockup image links for both desktop and mobile)

    1) For Desktop, I want the Menu to be in the Center, and it will have the Login Icon and the Cart Icon along with the Menu items. And I want to put in larger font the phone number (not the same size in button format), formatted right (so not glued to the menu in the middle, if possible). I’ve attached the mockup. Everything else is just for illustrative purposes, font color, size, etc, can be exactly like the Generatepress.com menu

    2) For Mobile, in the mockup photo, you can ignore the colour scheme (I just took my existing website and tweaked some things 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.

    I am kind of lost how to make this happen for the website, given that I’m starting with the Emerald Theme. Thanks for any help you can give.

    #1655598
    David
    Staff
    Customer Support

    Hi there,

    lets do #1 first.

    1. Go to Cusomizer > Layout > Header and disable the Navigation as Header Option.
    2. Customizer > Layout > Primary > Navigation and set the Location to Float Right.
    3. You can then insert your Phone Number using a HTML widget in Customizer > Widgets > Header.

    If that needs ‘tweaking’ or doesn’t work correctly then share a link to the site so i can advise.

    #1657327
    Milos

    Hi David, thanks for the help. So far so good for #1, mostly. Only issue so far with #1 is I can’t see a way to center the menu (but leave the HTML widget where it is on the right, so that I have logo left, menu center, and phone number on the right).

    I’ve pasted the link as well.

    #1657432
    Leo
    Staff
    Customer Support

    Gibe this CSS a shot:

    @media (min-width: 769px) {
        body.nav-float-right #site-navigation {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        body.nav-float-right .header-widget {
            margin-left: auto;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1657945
    Milos

    Thanks, that did it!

    Onto #2 now, the mobile portion.

    #1658090
    Leo
    Staff
    Customer Support

    Is there a chance you can open a new topic for the second question?

    Longer questions like these are much easier to handle one at a time so it’s easier for us to track and look back – especially when we have different staff helping.

    Thanks!

    #1658384
    Milos

    Sounds good!

    #1659415
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.