Docs

[jennymbutterfield]

Hi There!

Okay, url: http://www.jennybutterfield.com
x version: 4.6.4

Question: I’m been doing some customization of my header, and I have all the elements and functions that I want in the header… however, they are stacked one on top of the other, and I want them in line across the top of the page.

I’m using the Icon stack and my navigation layout and logo container are “stacked” rather than inline under that Customize-> Header tab.

I’m not a huge coder, amateur at best… I really just need a hint about what coding might get those elements in line and where to put that code.

Ideally, I would like my header to be layed out like this:
LOGO———–search bar–contact info

Thank you in advance!

[Rupok]

Hi there,

You can use this CSS to place them on right:

.x-logobar .fa-ul {
  float: right;
}

.x-logobar form {
  float: right;
}

You can rearrange the content if you want to get the form on left. If you want more control then you can wrap them within a div and style that.

Cheers!

[jennymbutterfield]

Hi Again,

I tried the code… and it didn’t work.

I copy-pasted what you gave me into Customize->Custom->Edit Global CSS, and no changes took affect.

Thank you!

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[jennymbutterfield]

Hi again!

I actually got the code to work… so, my content is floating to the right of the logo container.

However, it’s floating at the top of the container. Could you show me what the code would look like with the <div so that my content is at the bottom of the logo container, “sitting” on top of the navbar?

Thank you! If I have any further issues, I would be more than happy to submit my credentials.

Jenny

[Jade]

Hi Jenny,

Please add this code:

.x-logobar form,
.x-logobar .fa-ul {
    padding-top: 82px;
}

Hope this helps.

[jennymbutterfield]

That is perfect! Thanks much for your help!

Jenny

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts