Docs

[sebagc]

Hi,
I just could accomplish the task of centring the logo in the menu following older topics.

Im having trouble adjusting the size and alignment of it.
Can you please advise?

I would like to make the logo little bigger and separate it from the top.
This is the URL: http://www.petitecotton.cl

This is the code im using from older topics:

}@media (min-width: 980px) {
.x-logobar {
display: none !important;
visibility: hidden !important;
}
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
text-indent: -99999px;
text-align: left;
width: 360px;
height: 72px;
background: url(http://petitecotton.cl/wp-content/uploads/2016/04/Logo-PC-PNG-White.png) no-repeat center center;
background-size: contain;
}
}
@media ( max-width: 979px ) {
.logo-menu-item {
display: none;
}
}
.x-navbar .desktop .x-nav > li#menu-item-31 > a:hover, .x-navbar .desktop .x-nav > #menu-item-31.x-active > a, .x-navbar .desktop .x-nav > #menu-item-31.current-menu-item > a {
box-shadow: none;
}
.x-navbar .x-nav-wrap .x-nav > li:not(#menu-item-31) > a {
padding-top: 50px;
}

Thank you very much!

[Lely]

Hello There,

Thanks for posting in and giving us your site URL.
By default the entire menu is centered and you have 5 links in the menu. The logo is the second link. centering the logo will make the entire menu off centered.
Try adding the following CSS:

@media (min-width: 980px) {
li#menu-item-7 a {
    padding-left: 64px; /* Adjust this value until the logo is centered*/
}
}

Hope this helps.

[sebagc]

Hi Lely! Thank you for the response. i could align it to the center.

I still need to align it vertically, separate the logo from the Top, and make a little bigger.
Can you help me out with this?
Thank you very much!

Best,
Sebastian

[Rupok]

Hi Sebastian,

Thanks for updating. Let’s add this code too :

#menu-item-61 > a {
  height: 100px;
  margin-top: 13px;
}

Hope this helps.

Cheers!

[sebagc]

Thank you very much for all the help!
Can i ask another question?
Im not exactly sure if it is because i have touched the navbar height and alignment(with, thanks to you, looks awesome in desktop) but when seeing the website on mobile size, the Logo and navbar height is too large.
Can you help me out to solve this?

Thank you very much in advance!!

[Paul R]

Hi,

To reduce the space in mobile, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 767px) {
.x-navbar-inner {
    min-height: 70px;
}
}

You may change 70px to adjust the height

Hope that helps.

[sebagc]

Thank you very much! It didn’t work but i could solve it by the Nav Bar options in Header Customiser. Sorry for bothering so much!
Is it posible to reduce de size of the logo (Stacked) in smaller Mobile devices?

Thank you very much!
Best regards!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){

a.x-brand.img {
    width: 25%;
}
}

Hope it helps.

[sebagc]

Hi Again! I hope reopening this subject is not a problem.

After successfully having the logo placed among the menu navbar i have the following problem.
If you notice in http://www.petitecotton.cl, you can se that when seen in desktop, the Titles of pages as Shop or the Cart, hide partially bellow the Navbar, you can still see the bottom line. When seen in Mobile and the menu goes back to normal and uses the normal logo, the Page’s Titles show correctly.

Please let me know if it is possible to fix.

As an added question, the lines that are above and in the bottom of the Pages Titles, can they be changed in colour? or manage the height of the Title Bar?

Thank you very much!!

[Christopher]

Hi there,

Please add this code as well:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
.x-header-landmark {
    border: 1px solid #f2f2f2;
}

Hope it helps.

[sebagc]

Thank you very much!
It works.
But if you notice, it doesn’t stay still… for some reason, when scrolling or hovering, it goes back to how it was before.

please feel free to visit http://www.petitecotton.cl shop, and you’ll see what i mean.

Sorry for bothering!
Thank you very much!!!

[Jade]

Hi there,

I can’t seem to replicate or see the issue that you are describing. Would you mind providing a screencast of the issue you currently have so that we could check it further? Thank you.

[sebagc]

Hi! Thanks for the answer.
Please attached screenshots.
One is when scrolling up, the Title Bar shows ok.
When letting go the scroll, the Title Hides Completely behind the nav bar. Looks Terrible.
This is using Safari and Chrome.

Please help!!
Thank you very very much in advance!

Best regards!

[Rue Nel]

Hello There,

Thanks for providing the screenshots. Please set your navbar height. At the moment, it is set to 70 yet the actual height is 156 pixels. Please go to your customizer, Appearance > Customize > Header > Navbar and set the “Navbar Top Height (px)” to at least 156 pixels.

Hope this helps.

[sebagc]

You are right! Now it works perfect! Thank you!!

[Author]

Posts