[Resolved] Heder menu & logo size or alignment is matching with sticky navigation menu.

[linuxwolf]

Hello leo,
You’d showed me a CSS error last time. Could you please check and tell me if it can be fixed? The cache plugin is off.

Also, how can I reduce logo size for mobile header?

[linuxwolf]

I cannot take screen shot of the issue, it’s not possible.
I had to match the header logo size with sticky header logo size which is still not perfect.

[linuxwolf]

Are you going to enjoy Sunday?
Tell me so I won’t wait for replies.

[Leo]

I’m not really seeing the issue on my end.

Can you test if the same issue occurs if you use this method?
https://docs.generatepress.com/article/navigation-as-a-header/

If so let’s go with that and I’ll give you some CSS for the navigation search width.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

You can also subscribe to the topic so you will get a notification when there is a reply so don’t need to wait around 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[linuxwolf]

Also, please tell me how can I change logo size on mobile header?

[Leo]

Let’s tackle one thing at a time before we move on.

Have you solved the desktop logo issue yet?

If not try this first:
https://generatepress.com/forums/topic/heder-menu-logo-size-or-alignment-is-matching-with-sticky-navigation-menu/page/2/#post-1522034

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[linuxwolf]

You said, everything is alright, so that must be solved.

Kindly guide on changing logo size on mobile view.

[Leo]

See the second sentence starting with “The height of the logo” here:
https://docs.generatepress.com/article/mobile-header/#branding-type

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[linuxwolf]

I installed simple CSS and added these CSS codes

.navigation-branding img, 
.site-logo.mobile-header-logo img {
    height: 130px;
}

and

.site-logo.mobile-header-logo img {
    padding: 0;
}

but nothing happened, or maybe I am not getting what to do with it. Please guide me here.

[Leo]

Have you tried adjusting the menu item height option in the customizer with the mobile toggle activated?
https://docs.generatepress.com/article/menu-item-height-width/#height

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[linuxwolf]

Menu item height increase or decrease the whole navigation menu item. I want to change the logo size smaller only.

[linuxwolf]

I can decrease the size without any css by following your last replay, but when I load the page in a mobile browser, the logo adjusts its size from big to normal. I have reset the browser but the issue remains the same. Is this due to CDN?

[Leo]

So which method are you using now? Just the CSS?

but when I load the page in a mobile browser, the logo adjusts its size from big to normal. I have reset the browser but the issue remains the same. Is this due to CDN?

Can you disable CDN and the caching plugin?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[linuxwolf]

The method I had mentioned in the replay. Thanks for your help.

[Author]

Posts