[Resolved] Centered logo menu: logo appearing in search entry field

[Eli]

Hi GP gang,

I am following this documentation for a centered logo style menu: https://docs.generatepress.com/article/centering-logo-navigation/

The problem is: the logo remains visible when the search field is open! I tried making the Z-index of the search field 1000 which hid the logo, but it also hid the ‘X’ to close the field, so I cannot use that as a fix.

Additionally, on mobile, the search field appears narrow and does not cover the whole height of the menu and looks quite shabby.

Link to dev site below

[Ying]

Hi Eli,

You have this css which is causing the logo above search bar issue:
https://www.screencast.com/t/u6XI2At8c8t

Remove the z-index for logo should fix the problem.

For the mobile issue, it’s because you have this css which set the search bar height to 30px.
https://www.screencast.com/t/VGQYRoKKhc

I’m not able to tell where it comes from, if you can disable your cache plugin and clear cache, we can have a better look into it.

[Eli]

Hi Ying,

Thank you so much for the reply. This fixed the logo issue.

However, after removing the search bar CSS, there are still two problems:

1 – Mobile: The search bar is now narrow, about 1/3 the height of the menu, and stuck to the very top of the screen, on MOBILE only. How can I make it fill the entire menu space on mobile, like desktop?

2 – Desktop: When crossing the @media breakpoint and changing to mobile/hamburger menu on DESKTOP, a ton of extra padding appears above and below the menu items. But the menu is perfectly sized on mobile.

[Ying]

1. As I replied in my last comment, the height: 30px; css added to the search bar is creating the problem.

Your caching plugin is still on, I can’t see where the css coming from. You could try to find our where you set it or added it yourself, or dsiable cache plugin clear cache we can have another look. Once you delete this CSS the search bar will cover the entire header.
https://www.screencast.com/t/e5Y1nyy3

2. I’m not sure I fully understand your issue for desktop, it looks perfect to me, could you specify what you are trying to achieve here?
https://www.screencast.com/t/4IhZvJGq

[Eli]

1. To the best of my knowledge, I have removed the height: 30px CSS on the search bar. I see it showing up in the Chrome inspect window however it is not in the customizer CSS window, or theme customizer. I have also disabled the caching plugin and cleared my browser cache. Despite this, the search bar is still small.

2. On desktop, if you shrink the browser window below 850px and the mobile menu appears, it has extra padding above and below the logo + menu items. The extra padding does also appear on single blog posts on a mobile device where I have created a header element with merged navigation following this documentation: https://www.youtube.com/watch?v=PYb5OClrRaE

[Elvin]

Hi there,

Are you aiming for something like this on mobile? https://share.getcloudapp.com/5zuAOdRy

If so, add this CSS:

@media(max-width:768px){

form.search-form.navigation-search.nav-search-active, form.search-form.navigation-search.nav-search-active input {
    height: 100%;
}

.menu-bar-items {
    order: 2;
    margin-right: 10px;
}
}

[Eli]

Hi Elvin,

Thanks so much.

form.search-form.navigation-search.nav-search-active, form.search-form.navigation-search.nav-search-active input {
height: 100%;
}

– This fixed the search bar height issue. Exactly what I needed.

However, the problem of the extra padding above and below logo/menu items is still there. You can see it in the screen capture you just sent. There is too much blue space.

[Elvin]

Add this in so your SVG logo is properly adjusted on mobile.

@media(max-width:768px){
    .site-logo a {
        line-height: 0;
        font-size: 0;
    }
    .site-logo svg {
        height: 80px;
        width: auto;
    }
}

You may also want to add .site-logo{ padding: 10px; } so the logo doesn’t touch the edge of the navbar but this is optional.

[Eli]

Thank you for the reply. We now seem to have the opposite problem after adding that CSS – the mobile menu bar is now too narrow and the logo is cut off. Adding padding to the logo as you suggested did not fix the problem.

[Ying]

Hi Eli,

You have this CSS which moves the logo for both mobile and desktop.
https://www.screencast.com/t/Hhx12MhTyFmG

If you need it for desktop, then add a media query to it. So change this:

.site-logo svg {
    width: 110px;
    margin: -50px;
}

to this:

@media (min-width: 769px) {
    .site-logo svg {
        width: 110px;
        margin: -50px;
    }
}

[Eli]

Ying & Elvin,

Thank you so much for your support. The menu is looking perfect now. Problem(s) resolved!!

Much appreciated,

Eli

[Author]

Posts