Topic: Creating Mobile Menu

Webkiter
June 10, 2024 at 3:11 am

Hi there,

I am working on a mobile menu of the website I will link down in the Private Information Box.

At the moment it looks like this.

Questions:
– Where are the settings to create margins / paddings around the text?
– How can I center the text in the orange button and influence the size of the button so that it looks similar to the one in the desktop version?
– How can I change the margins / paddings of the mobile menu before I press the Hamburger icon?
– How can I change the size of the Hamburger Icon without influencing the size of the menu typo?

Thank you!

David

June 10, 2024 at 4:58 am

Hi there,

1. to style the button like desktop and add some space around it , use this CSS:


#mobile-header .main-nav ul li:last-child a {
    margin-inline: 15px;
    text-align: center;
    max-width: max-content;
}

2. for general padding of the mobile header and nav add this CSS:


#mobile-header {
    padding-inline: 20px;
    padding-block: 5px;
}

3. the mobile hamburger icon size:


#mobile-header .menu-toggle {
    font-size: 28px;
}

Webkiter
June 10, 2024 at 7:50 am

Thanks so much, David!

Awesome support and very useful.

Enjoy the day and talk soon!
Keno
David
June 11, 2024 at 2:09 am

Glad to be of help!
Webkiter
July 8, 2024 at 11:55 pm

Hi David,

I tried to added this css to another website I own – linked it in the private information.

`#mobile-header .menu-toggle {
font-size: 28px;
}

In that case, the hamburger toggle icon size doesn’t change, when I add the code and modify it.

Can you help?

Thanks again and enjoy the day!
Keno
Alvind
July 9, 2024 at 12:03 am
Hi there,

It’s not working because the other site has a different selector. Use this one instead:
```
nav.mobile-menu-control-wrapper .menu-toggle {
  font-size: 28px;
}
```
Webkiter
July 9, 2024 at 1:58 am

Thanks Alvind,

is this also true for the other css codes David provided above?
And – how can I find out that myself, so that I don’t have to bother you with these pre-school questions? 😉

Thanks in advance!
Webkiter
November 15, 2024 at 6:10 am

Thank you!

Can you also help on how to change the mobile menu background colour?

I tried it but everytime I did, the background color of the desktop version changed also.

And….I set a hovering color – other than white – for the main navigation text. Still hovering doesn’t work here on my end. How can I fix that?

Thank you!
Ying
November 15, 2024 at 8:28 am
I tried it but everytime I did, the background color of the desktop version changed also.

there isn’t a responsive setting for colors, so color change will apply to all devices.

Try this CSS:
```
@media(max-width: 768px) { 
nav#site-navigation .main-nav > ul {
    background-color: blue;
}
}
```
And….I set a hovering color – other than white – for the main navigation text. Still hovering doesn’t work here on my end. How can I fix that?

What is the color you set? I assume you selected a global color? what is the color name and code?
Webkiter
November 17, 2024 at 5:43 am

Now, my mobile menu looks like this, when I add your code.

How can I set the margins and padding of the mobile menu, so that the single menu items can be place a bit more into the middle?

Also, how can I set the size of the logo in the top left corner, so that the size only changes for mobile?

What is the color you set? I assume you selected a global color? what is the color name and code?

The color codes for the menu items is : #ffffff | #9CD9CE | #ffffff
So when hovering, it should show color #9CD9CE

Thanks so much in advance!
Alvind
November 17, 2024 at 5:31 pm

Is the site you shared in the private information section the one you are currently working on? It seems different from your screenshot. If not, could you share the new site so we can inspect it and take a look?
Webkiter
November 18, 2024 at 1:39 am

Hi Alvind,

thank you!

Sorry, I changed the website url in the private information.

Also, when I create the credits in the footer, it looks like this in my GP Editor. When I view the footer and the credits underneath it on my mobile phone, it looks completely different and no matter what I do, it doesn’t look the same as i created it in the editor. But why?

I assume that editing in the mobile view should also lead to the same result on an iPhone 15 pro. Correct?

Thanks in advance!
Ying
November 18, 2024 at 9:05 am
it looks completely different and no matter what I do, it doesn’t look the same as i created it in the editor. But why?

It’s due to this CSS in your child theme styles.css file:
```
.gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}
```
Webkiter
November 19, 2024 at 3:13 am
Thanks a lot Ying,

I deleted it and it worked.

Can I also delete the following code from the style.css?
```
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}
```
Thanks again!
Ying
November 19, 2024 at 10:34 am

We can not answer questions like this, as it depends on if your site needs it.

If you delete the CSS and everything is still working fine, then yes. you can delete it.
Webkiter
November 20, 2024 at 1:35 am

Hi there,

can you please help me with this?

Now, my mobile menu looks like this, when I add your code.

How can I set the margins and padding of the mobile menu, so that the single menu items can be place a bit more into the middle?

Also, how can I set the size of the logo in the top left corner, so that the size only changes for mobile?

What is the color you set? I assume you selected a global color? what is the color name and code?

The color codes for the menu items is : #ffffff | #9CD9CE | #ffffff
So when hovering, it should show color #9CD9CE

Could it be, that it doesn’t work, because the menu items are anchor links to link within the same page? Doesn’t hovering work in this case?

Thanks so much in advance!

Thank you!

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?

Creating Mobile Menu