Docs

[sebagc]

Hi!
I know the header builder its still in the making, im really looking forward to the great work you are doing right now, and always grateful for all the help you provide!

I was wondering if you can help me out with something that i have done before with X, but right now is not working for me!

I need the Logo in the center of the navbar. With your help, i could accomplish something like that in the following topic:
https://community.theme.co/forums/topic/renew-center-logo-in-menunavbar/

But now im having trouble centering of the logo. Although with some right padding of the last menu item i can sort of locate the logo in the center, i figure that when the site is viewed from other media sizes, the logo will look off again. Is there a way to truly center the logo in the navbar?

The website is o-tres.cl.
ill send credentials in the following message.

Thank you very much!!

[sebagc]

This reply has been marked as private.

[sebagc]

Please nevermind!! i found another topic that worked!!!

Im sorry for the inconvenience caused!

[Joao]

Thanks for letting us know,

Joao

[sebagc]

Hi Friends!
Can you take a look at a the page again?

I need help with 2 Issues:

1. Although i could place the logo in the Navbar, since the length of the menu items is irregular, the logo is not 100% Centered, is there a way to make the logo element truly centered?

2. Since i set Single page Navigation for my home page, i have 2 different menus for the rest of the pages. But as you can see, the logo is not the same size, the navbar height is not the same either, and therefore, when i align the navbar links for one, it doesn’t look correct in the other. Is there a way to make both look the same? It would be awesome to have both as the one in the home menu.(smaller one)

Thank you very much in advance!!!
Best regards!
Sebastian

[Joao]

Hi Sebastian,

I went to Appereance > CUstomizer > Header and adjusted your Top Link Spacing to : 55

I also add some margin to your logo by adding the following code to Appereance > Customizer > Custom > CSS

.logo-menu-item {
    margin-top: 10px;
    margin-bottom: 10px;
}

I have removed this code that was causing the logo size differences:

#menu-item-31 > a, 
  height: 150px;
  margin-top: 5px;
}

Hope it helps

Joao

[sebagc]

Wow! Thanks Joao!

Can you help me with another problems?

1. In the home page, section Servicios, i have a green button. Is there a way to make them all verticaly aligned in the bottom of their row?

2. In the Servicios Page, i have icon lists. Is there a way to vertically align it to the center of the column or row? So it is aligned with the illustration. i tried code: vertical-align: center;

3. In the servicios page, i have 3 similar sections(title, illustration and icon list), but since one of them is with the illustration at the right, when i see it in mobile, the icon list goes first. Is there a way to have the illustration above the icon list as in the others?

Thank you very much!!!

[Prasant Rai]

Hello There,

Thanks for writing in!

1) Please add this under Custom > CSS in the Customizer to vertically align all buttons in services section:

.x-column.x-sm.x-1-3:first-child a.x-btn.x-btn-global.x-btn-block {
    margin-top: 50px !important;
}

Can you please elaborate the other two questions along with screenshots?

Thanks.

[sebagc]

Hi Prasant Rai!

1) It worked partially, can you take a look again?

2) At the following page http://o-tres.cl/servicios/ , i used Icon lists. Is there a way to vertically align them to the center of the Row they are in?

3) At the same page, you will see that a Row has an illustration in the right column. Because of this, the icon list comes first when seen in mobile, as in the attached picture. Is there a way to change the order so as to make the illustration come first and the icon list later?

Thank you very much!
Best
Sebastian

[Christopher]

Hi there,

#1 Please add gap element to adjust the height.

#2 Instead of using icon element, use feature list element which has Vertical alignment option.

#3 Columns stack on top of each other from left to right on mobile devices. To change this order, please use visibility options and add another section for mobile.

Hope it helps.

[sebagc]

Thanks Christopher!
Can you help me out with the centering of the logo in Navbar again?
For some reason is not truly centered.

Thanks you very much!!!

[Thai]

Hi There,

The logo looks fine on my end:

http://i.imgur.com/LJv4YBt.png

Could you please send us with a screenshot?

Many thanks.

[sebagc]

Hi Thai!
Please can you take a look at the services page? http://o-tres.cl/servicios/#servicios1
It has a different Menu.

Thank you very much!

Sebastian

[Rad]

Hi there,

It’s due to menu items with different width. The solution is making the menu item’s width the same.

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0px;
    padding-right: 0px;
    min-width: 161px;
}

But it will look ugly since the short word has more space. But please try this as well

.page-id-9 .x-navbar .desktop .x-nav {
    padding-left: 58px;
}

This is only applicable for that specific page and specific menu.

Thanks!

[sebagc]

Thank you very much! I used the second option.

Is it possible that you can help me with these other 2 pages?
http://o-tres.cl/test/
http://o-tres.cl/quienessomos/

I worry if in the future for singular posts it won’t work though. Is it posible to make this arrangement for the menu across the website? (instead of the home page that has the single page nav. menu)

Thank you very much in advance!

[Author]

Posts