[Resolved] I have several (small) responsive problems when centering the logo

[Hernan]

Hello. I have come across some problems that I have not been able to solve.

I have used this snippet to center the logo on my page:

https://docs.generatepress.com/article/centering-logo-navigation/

Specifically in my design I have the problem that when I shrink the navigation window letters overlap in the logo:

At one point I thought of solving this by changing the breakpoint to the hamburger menu. So that if the user shrinks the window, it goes to responsive mode and the menu never overlaps the logo. I changed the breakpoint to 1500px. In 1080p resolution it works fine, but on high resolution monitors it doesn’t work as expected since it always applies the hamburger menu (probably because operating systems magnify text so the text doesn’t look too tiny). Maybe if there was a way to make it switch to hamburger menu as soon as the user removes full screen from the window

I finally went back to the default breakpoint for responsive design so that the experience doesn’t get worse for users with high resolution monitors

I have also noticed that my logo is not correctly centered on tablets

There are several details that I need to polish so that it is fully responsive. It would be great if GeneratePress in the future offered a default centered logo design for newbies

I appreciate any advice or help

Thank you very very much

[Fernando]

Hi Hernan,

Perhaps you can split the menu items on a specific screen size so that they don’t overlap with the logo. For instance, try adding this CSS through Appearance > Customize > Additional CSS:

@media (min-width: 768px) and (max-width: 1285px) {
    body nav#site-navigation.main-navigation, {
        margin-left: unset;
    }

    div#primary-menu > ul > li:nth-of-type(3) {
        margin-right: auto;
    }

    body nav#site-navigation.main-navigation, body nav#site-navigation.main-navigation .inside-navigation, div#primary-menu {
        width: 100%;
    }
}

[Hernan]

It sounds very very interesting. It is a practical and effective solution

I only have a problem that when applying the snippet the elements stack up in sticky navigation

Nor have I been able to make progress on the problem I have to center the logo on tablets (it is slightly moved to the left)

I originally centered the mobile logo like this:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 45%;
    transform: translatex(-50%);
}
#mobile-header .inside-navigation {
    justify-content: flex-end;
}

But I feel that I am closer to the desired result, any help or advice is very welcome

Thank you !

[Hernan]

It’s weird, but I also can’t adjust or force center position with media query for tablet

@media (min-width: 769px) and (max-width: 1024px) {
    .site-logo.mobile-header-logo {
    position: absolute;
    left: 60% !important;
    transform: translatex(-50%);
}
#mobile-header .inside-navigation {
    justify-content: flex-end;
}
}

[Hernan]

Sorry, I’m a little distracted, I hadn’t noticed the dimensions of the media query. My CSS code is not very elegant, but in phone dimensions I have left it with left:45% while for 600px and more I would apply left:50%

I think this will have happened to me since WordPress generates different versions of the logos (in addition to the fact that the desktop logo itself has different dimensions than the mobile one)

I think I have it focused in most scenarios, I just need to avoid or at least reduce the possibility of overlapping text on top of the logo (I sense that it can happen to me on my page anyway since I have no real control of the extension that can have the nickname of the user)

[Hernan]

I think I’m fine for now. I’m evaluating a major design change and may still need to use the left side of my header

Thanks for the support and ideas.

[Fernando]

I see. You’re welcome, Hernan!

[Author]

Posts