Comments leoyipenvato started the conversationMarch 19, 2022 at 4:00pmthe logo on main bar has been set vertical-align as top, how to change it to middle? 2,610PenciDesign repliedMarch 19, 2022 at 4:07pmHi,Please go to Appearance → Customize → Logo & Header → Logo: add the value to Logo Padding Top & Bottom to adjust the spacing.Regards,PenciDesign.leoyipenvato repliedMarch 20, 2022 at 3:31amnothing happened. 2,610PenciDesign repliedMarch 20, 2022 at 3:40amHi,Please go to Appearance → Customize → Custom CSS then add the following custom CSS code: .penci-logo { display: inline-block; vertical-align: middle;}#navigation.header-6 #logo { line-height: 58px; vertical-align: middle;}Regards,PenciDesign.leoyipenvato repliedMarch 20, 2022 at 3:54amnothing happend. 2,610PenciDesign repliedMarch 20, 2022 at 4:01amHi,Please replace with this code: .penci-logo { display: inline-block; vertical-align: middle;}#navigation.header-6 #logo { line-height: 499px; vertical-align: middle; transition: all 0.3s ease-in-out;}.is-sticky #navigation.header-6 #logo { line-height: 58px;}Regards,PenciDesign.1 Likeleoyipenvato repliedMarch 20, 2022 at 4:12amit works perfectly, thank you so much.salesdom repliedSeptember 8, 2022 at 9:08amHiUsed the css you recommended but this moved the logo also on mobile. How can I apply this only on desktop view? Thanks. 2,610PenciDesign repliedSeptember 8, 2022 at 9:41amHi,Please modify the CSS code like this: @media only screen and (min-width: 1170px) { .penci-logo { display: inline-block; vertical-align: middle; } #navigation.header-6 #logo { line-height: 499px; vertical-align: middle; transition: all 0.3s ease-in-out; } .is-sticky #navigation.header-6 #logo { line-height: 58px; }} Regards,PenciDesign.salesdom repliedSeptember 8, 2022 at 10:03amThanks. Configured this a little so it would better suit my site as needed to add left and right padding (to menu and logo) as well so added below css and all works. Thanks and have a nice day. @media only screen and (min-width: 1170px) { {line-height: 72px; vertical-align: middle !important; padding-left: 64px; padding-right: 64px;} .penci-logo { display: inline-block; vertical-align: middle; } #navigation.header-9 #logo { line-height: 72px; vertical-align: middle; } #navigation.header-9 { padding-left: 64px; padding-right: 64px; }} Sign in to reply ...
the logo on main bar has been set vertical-align as top, how to change it to middle?
Hi,
Please go to Appearance → Customize → Logo & Header → Logo: add the value to Logo Padding Top & Bottom to adjust the spacing.
Regards,
PenciDesign.
nothing happened.
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
Regards,
PenciDesign.
nothing happend.
Hi,
Please replace with this code:
Regards,
PenciDesign.
it works perfectly, thank you so much.
Hi
Used the css you recommended but this moved the logo also on mobile. How can I apply this only on desktop view? Thanks.
Hi,
Please modify the CSS code like this:
Regards,
PenciDesign.
Thanks. Configured this a little so it would better suit my site as needed to add left and right padding (to menu and logo) as well so added below css and all works. Thanks and have a nice day.
@media only screen and (min-width: 1170px) { {line-height: 72px; vertical-align: middle !important; padding-left: 64px; padding-right: 64px;}
.penci-logo {
display: inline-block;
vertical-align: middle;
}
#navigation.header-9 #logo {
line-height: 72px;
vertical-align: middle;
}
#navigation.header-9 {
padding-left: 64px;
padding-right: 64px;
}
}