Problem with header height & navigation width

Hi there,

1. How to adjust the logo fit with header? Not too big like screenshot, just fit.

I'm not exactly sure how you want the logo to fit? Do you want to reduce the size only but still keep it on top of the menu?

If that's the case, we can make the logo appear smaller by CSS.

Example:

.site-logo {
    width: 180px;
}

Adjust the width value to your preference. :D

2. Why the search icon is incumbent with menu navigation? And when I disable the search icon, the navigation is place on background image below. Just got headache with this 🙁

It's because of this CSS:

.main-navigation:not(.toggled) .main-nav > ul {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

When you disable the search icon, the <nav>'s height is 0 because the height of the menu items are not used by it due to the use of position: absolute;.

I'd consider removing the CSS if you don't use it for anything. :D

Hi Elvin, thank you so much. The problem is solved with your guidance :)

No problem. Glad to be of any help. :D