How to adjust logo size using mobile header in GeneratePress

Updated on:

The Mobile header of GeneratePress gives the header a clean look on mobile, but sometimes the logo looks too small. How to adjust the logo size?

GenerateTips

1. Go to Customizer > Layout > Primary Navigation > Navigation > Menu Item Height.

2. Click on the mobile icon, now you can set the menu item height/logo height.

3. (Optional) cSS style

Once the logo height is set, we can use CSS to override the padding around logo and the menu icon which is 20px by GP default (green part). In the below CSS, the 4 values present the top/right/bottom/left, so feel free to adjust the values.

#mobile-header {
    padding: 5px 10px 5px 10px;/* top right bottom left*/
}

After applying the CSS, the mobile header likes like this now: