Docs

[Nina M]

I’ve managed to get my header centered in my navbar (currently static, inline with a top height of 270) but the logo doesn’t show on a cell phone. I’m just wondering if I’ve done it the best way by specifying pixels or if there is some other way that would be more efficient for X’s responsiveness. Thank you! Trying to learn!

In my CSS:
.archive .x-landmark {
display: none;
}

.x-navbar .x-brand {
margin-bottom: 25px;
}

.x-navbar .x-container.max.width {
max-width: 90%;
width: 90%;
}

footer.x-colophon.top {
margin-bottom: -25px !important;
}

a.x-brand.img {
position: absolute;
top: 30px;
left: 440px;
z-index: 99999;
}

.x-menu-item-woocommerce a.x-btn-navbar-woocommerce {
padding-top: 15px !important;
}

.x-navbar .desktop .x-nav > li > a {
padding-bottom: 30px;
padding-top: 27px;
}

.x-navbar-wrap {
position: relative;
z-index: 99;
}

.x-menu-item-woocommerce a.x-btn-navbar-woocommerce {
padding-top: 15px !important;
top: -10px;
left: 80px;
}

@media(min-width: 980px) {
.x-brand.img {
position: absolute;
top: 0;
left: 480px;
z-index: 99999;
}
}

.top-menu {
float: left;
}

.top-menu ul {
margin: 0;
}

.top-menu li {
display: inline-block;
}

.top-menu li a {
padding: 0 20px 0 0;
line-height: 46px;
}

.x-social-global .cart {
color: #5d215d;
}

[Nina M]

It’s http://www.MiaChocolates.com

[Christian]

Hey Nina,

Please remove

left: 480px;
z-index: 99999;

from

@media(min-width: 980px) {
.x-brand.img {
position: absolute;
top: 0;
left: 480px;
z-index: 99999;
}
}

Hope that helps. 🙂

[Author]

Posts