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

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

Home Forums Support Centered logo menu: logo appearing in search entry field

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1675556
    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

    #1675594
    Ying
    Staff
    Customer Support

    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.

    #1675627
    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.

    #1676328
    Ying
    Staff
    Customer Support

    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

    #1676508
    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

    #1676646
    Elvin
    Staff
    Customer Support

    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;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1676648
    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.

    #1676925
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1677633
    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.

    #1677757
    Ying
    Staff
    Customer Support

    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;
        }
    }
    #1677867
    Eli

    Ying & Elvin,

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

    Much appreciated,

    Eli

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.