Docs

[LORDVONAKI]

Hi,

I am developing some tools for my website and I would like this part of the website (where the tools are located) to have a total different header. How do I create and activate a new header but only for this part of my website?

Thanks,

Lordvonaki

[John Ezra]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[LORDVONAKI]

Hi,

This is pretty straight forward:
I need for some pages to have the header I have now: with the logo in the middle, the menu etc. As you can see here –> http://www.althos-patrimoine.com/

But for some pages I would like to have the logo at the far left of the header, and no menu. So i guess I have to create a second header. So how do I do that?

Thanks,

Lordvonaki

[John Ezra]

Hi Lordvonaki,

Thanks for updating the thread. You can use CSS to isolate certain pages and hide the nave while moving the logo to the left.

We don’t know which pages you are referring to so we can’t tailor our response, however here is a guide.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.page-id-259 .x-logobar-inner a.x-brand.img {
    float: left;
}

.page-id-259 .x-navbar-wrap {
    display: none;
}

Note that the .page-id-259 selector is currently your homepage. You can go to the page you want to add this effect, right-click and inspect to open your browser dev tools. Look under the body tag to find the page or post id.

To add multiple pages, you need to add multiple selector lines, using a comma.

Example:

.page-id-259 .x-logobar-inner a.x-brand.img,
.page-id-269 .x-logobar-inner a.x-brand.img,
.page-id-1096 .x-logobar-inner a.x-brand.img {
    float: left;
}

.page-id-259 .x-navbar-wrap,
.page-id-269 .x-navbar-wrap,
.page-id-1096 .x-navbar-wrap {
    display: none;
}

Let us know how that goes. Hope this helps – thanks!

[LORDVONAKI]

Thanks, I made it work!

[Nico]

Happy to hear that.

Feel free to ask us again

Thanks.

[Author]

Posts