[Resolved] Customizing Desktop/Mobile Menu

[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.

[David]

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.

[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.

[Leo]

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/

[Milos]

Thanks, that did it!

Onto #2 now, the mobile portion.

[Leo]

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!

[Milos]

Sounds good!

[Leo]

Thanks 🙂

[Author]

Posts