Topic: How to Create Mobile Menu?

Avadhut
November 24, 2025 at 5:02 am

Hi,

I want my menus to open after clicking this Menu icon (mobile view), but, it’s not happening. How to do that? Maybe I missed some linking?

Image: https://ibb.co/s9S6HwLd
URL: https://financewalk.com/

Thank you.
Ying
November 24, 2025 at 2:32 pm

Hi there,

The menu is showing by default; you don’t need to click the hamburger icon.

So do you only need the hamburger icon on mobile and open the navigation by clicking the hamburger icon?
Avadhut
November 28, 2025 at 10:46 am

So do you only need the hamburger icon on mobile and open the navigation by clicking the hamburger icon?

– Yes
Ying
November 28, 2025 at 10:57 am

Try enable the mobile header at customizer > layout > header.
Avadhut
December 2, 2025 at 8:31 am

Done this – enable the mobile header at customizer > layout > header.

Still not working.

Ying

December 2, 2025 at 10:37 am

You have this CSS:

 .main-nav > ul {
      display: flex!important;
      flex-wrap: nowrap!important; 
      justify-content: center!important; 
      padding-left: 0!important; 
      margin-block: 0!important; 
      list-style: none!important; 
      text-align: center!important;
      white-space: nowrap!important;
    }

change it to:

 @media(min-width: 769px) { 
.main-nav > ul {
      display: flex!important;
      flex-wrap: nowrap!important; 
      justify-content: center!important; 
      padding-left: 0!important; 
      margin-block: 0!important; 
      list-style: none!important; 
      text-align: center!important;
      white-space: nowrap!important;
    }
}

Avadhut
December 2, 2025 at 11:25 am

Where is this CSS? I couldn’t see in “Additional CSS”.
Ying
December 2, 2025 at 1:09 pm

In your child theme.
Avadhut
December 2, 2025 at 10:04 pm

Cool. This worked. Now, how to place it right side of the screen and edit it?

Thank you. 😊
Alvind
December 2, 2025 at 10:25 pm

Hi there,

Now, how to place it right side of the screen and edit it?

Are you referring to the hamburger menu icon itself or the individual menu items?
Avadhut
December 3, 2025 at 1:54 am

Are you referring to the hamburger menu icon itself or the individual menu items?

– Hamburger Menu Icon itself
Alvind
December 3, 2025 at 5:08 am
Got it. In your child theme stylesheet, locate this CSS:
```
.inside-navigation.grid-container { justify-content: center; }
```
Then replace justify-content: center; with justify-content: flex-end; so it becomes:
```
.inside-navigation.grid-container { justify-content: flex-end; }
```
Alvind
December 3, 2025 at 5:08 am
Got it. In your child theme stylesheet, locate this CSS:
```
.inside-navigation.grid-container { justify-content: center; }
```
Then replace justify-content: center; with justify-content: flex-end; so it becomes:
```
.inside-navigation.grid-container { justify-content: flex-end; }
```
Avadhut
December 3, 2025 at 6:34 am

It worked. Thank you.

How to edit colors and Font Size etc of this Hamburger Menu items?
Ying
December 3, 2025 at 10:17 am
The hamburger icon shares the same color as the primary navigation menu item color.

If you only want to change it for the hamburger icon and don’t want to affect the menu items, try this CSS:
```
span.gp-icon.icon-menu-bars {
    color: red;
    font-size: 20px;
}
```
Avadhut
December 4, 2025 at 12:58 am

Thank you. And what about the Font Size?

Viewing 16 posts - 1 through 16 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How to Create Mobile Menu?