Few issues with mobile header

Posted in : Energify
ilaos
Participant
26 September 2023 at 00:12
#85036

Hello. I have a few things I need help with for the mobile header.

The hamburger icon is too small. I’d like to make it bigger.
The logo needs some padding underneath, maybe 3-4 pixels under the logo.
The sticky mobile logo is too large, and also has no padding above or beneath.
Hoping you can help me.
serkan
Moderator
26 September 2023 at 22:56
#85050
Hi,
You can use this custom css code for increasing the hamburger icon’s width and height.
```
@media screen and (max-width: 767px) { .menu-toggle .lines, .menu-toggle .lines:before, .menu-toggle .lines:after { width: 26px; height: 4px; } }
```
The css code below will add a few pixels below the logo on mobile devices.
```
@media screen and (max-width: 767px) { .is-header-small .site-title img { margin-top: -3%; } }
```
This css code will solve the large mobile logo issue;
```
@media screen and (max-width: 767px) { .is-header-small .site-branding { max-width: 200px; } }
```
ilaos
Participant
27 September 2023 at 00:56
#85059

Hi. The first one worked somewhat, but the other 2 did not change anything. I even cleared the cache a few times.

Mehmet S.
Keymaster
27 September 2023 at 01:10
#85060

Hi, you can adjust margin and padding for logo from customizer.

See 1: https://i.ibb.co/Xj5h8vW/wp-image-logo-margin.png

See 2: https://i.ibb.co/7vkgw2K/wp-image-logo-padding.png

Thanks

ilaos
Participant
27 September 2023 at 01:22
#85070

Hi, yes. That fixed it. Thank you very much.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item

Energify - Solar & Renewable Energy WordPress Theme

by pixelwars