Logo adjustment

Hi there,

Remove your own CSS:

.site-logo {
    width: 50%;
    height: auto;
}

And try this instead:

.navigation-branding img {
    height: 50px;
}

The alignment issue is likely because of the image cropping - there is more padding on the top than the bottom as seen here:
https://www.screencast.com/t/OSEYbAoBEJ

thank you very much for your assistance. It is working.

No problem :)

now, I just noticed that the logo is getting bigger when I am scrolling down. I am using sticky navigation. I want it to stay the same when I scroll down. is it possible?

Can you disable the coming soon page so I can take a look?

Thanks :)

I have disabled coming soon page. You will be able to visit the page now.

Just letting you know, my Cloudflare is creating issues. it is showing last published page even after caching. So if you see this page or a blank page with footer widgets, let me know. I'll temporarily disable Cloudflare.

oh! I forgot to mention, I have a ghost button on my navigation panel. The border of the button is also getting bigger. Is it possible to fix? I mean I like to stay the same when scrolling down

Let's tackle one issue at the time.

Try editing your CSS to this:

.navigation-branding img {
    height: 45px !important;
}

Okay, this is working. the logo isn't getting bigger anymore. But it is showing a little bit on the right side. I have custom CSS to show it in the middle of the mobile navigation. And like adjust the size in mobile version too. it seems that i am unable to adjust the logo with my CSS because wehn i add the css it branding type was set to site tittle. I used the CSS which I mentioned below with a hook element for custom hamburger menu

li.slideout-toggle {
display: none !important;
}

span.slideout-toggle {
order: -1;
margin-left: 18px;
}
span.slideout-toggle a:after {
content: 'Menu';
margin-left: 4px;
}
span.slideout-toggle a {
color: #727272;
}
span.slideout-toggle a:hover {
color: #313131;
}
#mobile-header .menu-toggle {
order: -1;
margin-right: auto;
}
#mobile-header .navigation-branding {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-left: 0;
}
@media (min-width: 769px) {
span.slideout-toggle {
padding-right: 18px;
}
}

Try this CSS for mobile:

.site-logo.mobile-header-logo {
    margin-left: 0;
}

I would also recommend removing the mobile menu label so it would be true center:
https://docs.generatepress.com/article/mobile-menu-label/

Still, the mobile logo didn't shift in the middle so changed the value a bit.

.site-logo.mobile-header-logo {
margin-left: -10%;
}

plus I don't know how to decrease it's size. is it possible ot change it with CSS?

Hmm if you use the method here exactly:
https://generatepress.com/forums/topic/logo-adjustment/#post-1407971

The logo should be centered.

If you are happy with the current set up, then this CSS should change the logo size:

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

yes, I tried that setting but the logo is not centred so I adjusted it to -40 after changing logo size.

thank you this is working perfectly now.

No problem :)