Docs

[Nina M]

Hi, I am trying to work out my header issues. In the attached photo you will see that the logo is behind the nabber – I would like it to be in front of the nav bar. I have achieved this using this code:

a.x-brand.img {
position: absolute;
top: 30px;
left: 50px;
}

But can’t figure out how to get the logo part in front of the bar. I would also like to bring the cart icon above the nav bar (where it is now but just up about 80 px or maybe a little more) and to push the page titles to the right. How can I control these elements with coding? Thank you so much!

http://www.MiaChocolates.com

[Jade]

Hi Nina,

Please try to remove the height set in this code:

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

Then add this in the CSS customizer:

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

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

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

Then update this code:

a.x-brand.img {
    position: absolute;
    top: 30px;
    left: 50px;
}

to

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

Hope this helps.

[Nina M]

so that didn’t really work – maybe I”m making this harder than it has to be – what I want is for the bottom (aprox bottom 3rd) of my logo to just escape the logo bar (i’m in ‘inline’ mode right now in the customizer) and to hang over whatever element is beneath it. Is that possible? I’m trying to reduce the amount of huge white space caused by the shape of this logo being a diamond –

[Nina M]

In other words – I don’t want the logo to be constrained to the logo bar –

Here’s what I have right now in the custom css:
.archive .x-landmark {
display: none;
}

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

.x-navbar {
box-shadow: none;
}

.x-navbar {
padding-bottom: 26px;
}

a.x-img, .x-img {
margin-bottom: 0;
}

[Rue Nel]

Hello There,

Thanks for the updates! First, I will strongly recommend that you edit your image in Photoshop or Adobe Fireworks and remove the white background and make it transparent. And then, to make it float and positioned hanging in your navbar, please use the the following css code in the customizer, Appearance > Customize > Custom > CSS

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

We would loved to know if this has work for you. Thank you.

[Nina M]

Yes! This is working really well!
Now – is there a way to make it overlap the topper just a bit and to make the grey shadow/outline for the topbar go away?

THANKS!

[Nina M]

Here’s what I’ve tried (currently pasted in my CSS customizer)
.archive .x-landmark {
display: none;
}

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

.x-navbar {
box-shadow: none;
}

.x-navbar {
padding-bottom: 26px;
}

a.x-img, .x-img {
margin-bottom: 0;
}

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

.x-colophon {
position: relative;
border-top: 0;
background-color: white;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-navbar-fixed-left {
left: 0;
border-right: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-colophon {
position: relative;
border-top: 0;
background-color: white;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-navbar-fixed-left {
left: 0;
border-right: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-navbar-fixed-left-active .x-topbar, .x-navbar-fixed-right-active .x-topbar {
border-bottom: 0;
}

[Nina M]

Also for the life of me I cannot figure out to push the woo commerce icon down in-line with the menu

[Nina M]

I figured all this out, thanks!

[Rue Nel]

Hello There,

We are just glad that you have figured it out a way to correct the said issue. Thanks for letting us know!
Just don’t hesitate to open another thread if you need anything else.

Best Regards.

[Author]

Posts