Docs

[Nestor Rentas]

Hi All!

I wanted to inquire about an issue I am running into. Please advice if the following is possible?

-I am using an oversized logo inline and I want it to bring the navbar down behind it so that it is horizontally at the center of the logo. Currently, the logo is constrained by the nav bar top margin and I cant get it to display above it without increasing the nav bar height (see attached image). any ideas?

Thank you for a wonderful theme! Clients are flocking to it quickly!

[William]

Hey Nestor I would love to help you with your issue.

It looks like that the image you are providing X is too big and to make it the size you want you should resize it using the tool inside WordPress or you can use this tool: picresize.com and them upload the resized image to WordPress again and you can play around with the logo size until to get it to your liking.

Hope that helps.

– William 🙂

[Nestor Rentas]

Thanks William!

The size of the logo is not the issue…X provides the functionality in the customizer to allow for the image (logo) to be re-sized with no problems using the “Logo Width (px) option” The issue is that I am trying to create the effect of an over sized logo that overlaps the navbar with equal sizing on top and bottom. Look at the second mock up below.

http://celtirishpub.com/wp-content/uploads/2014/11/mockup2.jpg

[William]

Ok. I understand what you are trying to do. Since this feature does not come out of the box with x. You might have to create a child theme and customize it to get that effect.
Tutorial on child theme: https://theme.co/x/member/kb/how-to-setup-child-themes/

Hope that helps.

– William 🙂

[Nestor Rentas]

Truly appreciated William!

I am using child themes as instructed for all my sites but can you help me address the issue with the navbar? Any ideas of what I need to customize using css to make this effect happen? Do I modifiy the logo x-brand img area or do I attempt to modify the masthead area? (x-navbar ; x-navbar-inner)

Thank you for taking the time to respond!

[Christopher]

Hi there,

You need to choose stack layout under Customize -> Header -> LOGO AND NAVIGATION to move the menu below the logo.
Provide us with URL so we can see the issue.
Thank you.

[Nestor Rentas]

This reply has been marked as private.

[Paul R]

Hi Nestor,

Sorry for the confusion there.

Please select inline layout instead.

http://screencast.com/t/Dsi9No5KSlQ

Then you can add this under Custom > CSS in the Customizer.

body .x-navbar .x-brand {
   z-index: 99999;
   position: absolute;
   margin-top: -50px;
}

Hope that helps. 🙂

[Nestor Rentas]

Thank you…worked perfectly!

[John Ezra]

Awesome! Feel free to contact us again if anything else! Thanks.

[Author]

Posts