Docs

[Wardo_SD]

Hello! I am trying to achieve a centered logo header layout with the logo appearing in-line with the navbar. The URL of my site is http://lunabylavoie.wpengine.com/. I created a logo nav item and set it to class logo-menu-item. Here is the CSS I used to achieve the layout:

@media (min-width: 980px) {
.x-logobar {
display: none !important;
visibility: hidden !important;
}
.x-brand {
display: none !important;
visibility: hidden !important;
}
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
text-indent: -99999px;
text-align: left;
width: 175px;
height: 175px;
background: url(http://lunabylavoie.wpengine.com/wp-content/uploads/2015/09/Luna_Silver_Web.png) no-repeat center center !important;
background-size: contain;
}
}

.x-navbar .desktop .x-nav > li.logo-menu-item {
width: 175px;
height: 175px;
display: block;
}

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
position: absolute;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li.logo-menu-item > a {
background-size: contain !important;
width: 120px;
height: 120px;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li.logo-menu-item {
width: 120px;
display: block;
height: 120px;
}

However, this isn’t working quite right. The logo is being cropped pretty badly and I am not sure how to resolve it. Please Help!

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (min-width: 980px) {
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        background-size:contain!important;
        width:100%;
        margin-top:20px;
    }
}

Hope this helps – thanks!

[Author]

Posts