Docs

[zendern]

Dear X team!
I am using v. 4.6.4 X Theme with activated child theme and Icon Stack. WordPress veersion 4.7.1
URL: http://happypeople.blog

I have upgraded my old premium theme “Simple & Elegant” to Theme X and I am happy I did. Now I am trying to give my site the same look as it was with my Simple & Elegant theme.
Old site URL: http://makoeva.net/

I want to have a grey full width top bar with a Contact Me link on the left of the topbar and Search field on the right of the top bar, just like or similar to http://makoeva.net/

I have tried following instructions on link below, but with no success: https://community.theme.co/forums/topic/topbar-with-wp-menu-search-field/

Best regards,

[Rupok]

Hi there,

Thanks for writing in! You need to place the link and search box within Customize > Header > Topbar Content. To change the background color, you can add this under Custom > CSS in the Customizer.

.x-topbar {
  background-color: #f5f5f5;
}

Cheers!

[zendern]

Hi Rupok,

That worked, thank you!

I added height attribute to control the height of top bar.
Like this:

.x-topbar {
  background-color: #f5f5f5;
height: 3.5em;
}

I also aligned two elements in the top var using this code:

.align-left{
   float: left;
padding-top: 10px;
  font-size: 12px;
 }

.align-right{
   float: right;
padding-top: 10px;
 }

I also need to align these two elements on left and right with the width of post text container in the middle of the page.
Can you please help me with this as well?

All best

[Rupok]

Hi there,

Thanks for writing back. I can help with that. Let’s add this CSS as well :

.x-topbar .container {
  padding: 0 10%;
}

Cheers!

[zendern]

That worked beautifully, thank you!

[Joao]

Glad to hear it 🙂

Joao

[zendern]

Dear X team,

After further testing, we found that the top bar does not display correctly and its elements do not align correctly on smaller size screens like tablet and smartphone.

Can you please help me with this as well?

All best,

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 767px) {
.x-topbar .p-info {
    padding:0;
}
}

Hope that helps.

[zendern]

That worked great!

Your code fixed all the problems except that my search box was too wide and it misaligned on small screens anyway.

So I added this code:

 @media (max-width: 767px) {
.align-right{
	width: 30%;
}
}

.align-right is my search box div

Thank you for your support!

[Friech]

We’re delighted to assist you with this, feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts