main bar logo vertical align | PenciDesign Support

salesdom replied

4 years ago

Customer Reply

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

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

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 replied

4 years ago

Customer Reply

Hi

Used the css you recommended but this moved the logo also on mobile. How can I apply this only on desktop view? Thanks.

leoyipenvato replied

4 years ago

Customer Reply

it works perfectly, thank you so much.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

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.

leoyipenvato replied

4 years ago

Customer Reply

nothing happend.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

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 replied

4 years ago

Customer Reply

nothing happened.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Logo & Header → Logo: add the value to Logo Padding Top & Bottom to adjust the spacing.

Regards,
PenciDesign.

leoyipenvato started the conversation

4 years ago

Conversation Start

the logo on main bar has been set vertical-align as top, how to change it to middle?