Docs

[alge4]

I would like to insert a header ad, below to the main menu. Is this possible, or can you cay me any possible ways to achieve that? I know I can do through inserting a code to the top bar, but I want the ad below the main menu.

[Christopher]

Hi there,

We can help you move topbar to below navbar.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy wp-header.php from framework/views/STACK and put it in the same path inside child theme. Open this file and move this line :

    <?php x_get_view( 'global', '_topbar' ); ?>

just below following line:

    <?php x_get_view( 'global', '_navbar' ); ?>

Hope it helps.

[alge4]

hi there and thanks for reply. In fact I’ve decided to change top bar. I have inserted a photo to the top bar, BUT I have a problem, the photo is showing in half, not in the correct height.
I’m using the code :
.x-topbar { background-image: url(http://www.xxxxxxx.png);
background-repeat: no-repeat;
background-size: 100%;
background-height: 100%;
}
BUT I still have problem with the height.
Can you please help me with some code for photo height

[Rue Nel]

Hello There,

Thanks for updating in! You may update your code and use this instead:

.x-topbar { background-image: url(http://www.xxxxxxx.png);
  min-height: 400px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-height: 100%;
}

Feel free to adjust the minimum height according to the height needed for your image.

Hope this helps.

[alge4]

thanks, these really helped me

[Christopher]

You’re welcome.

[alge4]

Can you please help me one more time? When I open my blog through phone there is a hudge distance from topbar photo and header menu, but through laptop the code above works fine.
Thanks

[Nabeel A]

Hi again,

In this case please provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks!

[alge4]

ok, here’s the url: http://www.arisezone.com/ or you can enter in one of my posts: http://www.arisezone.com/other/urbanization-and-development/

thanks

[Jade]

Hi there,

Please add this code in the customizer:

@media (max-width: 767px) {
    .x-topbar {
        min-height: 200px;
    }
}

Hope this helps.

[alge4]

No it doesn’t work. It still shows a huge distance between top bar and header.
X theme is a really nice theme, it’s not so easy to edit, but I love it because you can build ANYTHING with X Theme, and you have the possibility to fully edit in any kind of forms vs. other themes, but in my opinion in a BLOG the header and the sidebar are the most important, and here can find many header, menu, sidebar options.
However I have read that you guys are working on it and releasing a header builder.
I hope it will be soon.

For my site I’m using Integrity Light, and I’m still working hard to edit it, but above all I’m seeing that the Theme has no enough light or resolution like others. I’m using a white background color, but still the white color is not shinny enough which make it sometimes look light gray.
So for now can you help me with two things:
1. the distance photo between top bar and header that shows in mobile phone
2. Increase the resolution or the light of site, or background & body background with light white. The idea is to make my site look more white. (ps: sorry for some nontechnical words)
Thanks

[Joao]

Hi There,

Let´s try a different approach.

Instead of adding your banner as background image,remove the code provided and go to Appereance > Customizer > Header and add to the topbar content:

<img src="http://www.arisezone.com/wp-content/uploads/2017/01/Screenshot-12_31_2016-2_35_32-PM.jpg">

Also add the following code to Appereance > Customizer > Custom > CSS

.x-main.full, body, .x-breadcrumb-wrap  {
    background: white;

}

Hope that helps

Joao

[alge4]

As for the background image it works, so thanks, but for the color background not.

The background is white, but I want it more white, more shiny, or more resolution
Can I have it in this way?

[Friech]

Hi There,

You can add this on top of Custom > Global CSS in the Customizer.

header .x-topbar .p-info,
header .x-breadcrumb-wrap {
	background-color: #fff !important;
}

The remaining gray on the header is coming from the banner and the navbar background-image.

Another thing, please check your entire custom CSS here: http://csslint.net/ and resolve the errors.

Thanks.

[Author]

Posts