[Support request] Navbar logo not responsive on mobile

[Noemi]

Hi,

The navbar logo is on the upper left- how do I center align the logo on mobile?

I’m using child theme

[Leo]

Hi there,

Can you try my suggestion #2 here?
https://generatepress.com/forums/topic/borders-of-logo-showing-in-navigation-bar/#post-753310

[Noemi]

Leo,

I tried your suggestion # 2, but the navbar logo still looks non-centered and there’s a huge gap in Mobile.

Please help with CSS to shorten the menu/navbar in mobile without reducing size of navigation logo— If you look through mobile, you can see the large gap between logo and the “menu”-icon. How to reduce this large gap without making logo smaller.

My current CSS is:
.main-navigation .navigation-logo {
padding-top: 0px;
}
.main-navigation .navigation-logo img {
height: 100px;
}
.site-header {
padding-top: 0;
padding-right: 0;
}
.main-navigation .main-nav > ul > li:first-child > a {
padding-top: 8px;
}
#site-navigation {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

[Leo]

Just checked on my phone and it looks good to me now?
http://www.screencast.com/t/kTpGeHh3wvmK

[Noemi]

a) In mobile, Is there a way for me to center the 3 lined-menu below the logo? (Without changing the way it currently looks on desktop)

b) Also, if you look close, there are thin vertical borders around the logo, and I would like to remove these. I put in the CSS code for the gradient background yesterday. I don’t want to necessarily stretch the logo disproportionately!

[Leo]

a) Are you currently using the Hooks Elements to remove the site header?

b) I’ve answered it here: https://generatepress.com/forums/topic/borders-of-logo-showing-in-navigation-bar/#post-754019
Please reply to the original topic where you’ve asked the question.

[Noemi]

a) I did not use the Hooks element (not sure where to find it). I just disabled the the Header under Disable Element-settings. In addition, I also used CSS code: .site-header {
padding-top: 0px;
}

b) Oh Okay, thank you. I photoshopped logo to make the transparent background, but it’s still showing… Do you have any recommendations?

Thank you,

[Leo]

a) Ok so remove that CSS and add this:

@media (min-width: 769px) {
    .site-header {
        display: none;
    }
}

b) Please reply here: https://generatepress.com/forums/topic/borders-of-logo-showing-in-navigation-bar/#post-754019

[Author]

Posts