[Support request] header logo is smaller when in mobile view.

[Doug]

I see other people are having this issue but I don’t understand the fix. I have a boxed in 1200 pixel logo across the top of my website. When I look at it in mobile view the logo is real small. If I enable the mobile header tab in the customizer then the logo shifts left and the menu to the right. How do I keep the logo large enough to see in mobile view with the logo on top and the menu below? If it involves adding CSS or code, could you explain where to put the code in Generate Press. perhaps you could send me some screenshots of where to put the code?

http://www.sycd.us/

[Leo]

Hi there,

Copy the CSS below:

@media (max-width: 768px) {
    .inside-header {
        padding: 0;
    }
}

And paste into Additional CSS field in the customizer:
https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Doug]

I was able to increase the logo size and mobile view with the CSS code however, my menu is not centered underneath the logo. how do I fix that and Was I supposed to put the CSS code on each page of the website?

[Leo]

Disable the mobile header then the toggle should show up in the center below the logo by default.

The CSS added in Additional CSS field is site-wide.

[Doug]

when I disabled the mobile header, the navigation bar does line up centered below the header. However, disabling the mobile header sends me right back to my first problem with the logo being too small. How do I keep the logo large and have the nav bar centered under the header?
This is the coding I found in “simple CSS” at the bottom of the page builder.

.mobile-header-navigation .mobile-header-logo img {
height: 100px;
}

.mobile-header-navigation .menu-toggle {
margin-top: 0px;

[Leo]

We can do similar CSS without the mobile header:

@media (max-width: 768px) {
    .site-logo .header-image img {
        height: 100px;
    }
}

[Author]

Posts