XenBase - Search location

[Rapmania]

Hi,

i bought the xenbase theme. I want to make a change in the header, but it's not happening. You didn't add it as a feature. How can I do this in PAGE_CONTAINER? Which codes do I need to change?

I want to take it next to the logo.

 

[Russ]

I think you could achieve it using just CSS. Place this inside extra.less:

.p-header-content
{
    .p-header-logo
    {
        margin-right: @xf-elementSpacer;
        order: 1;
    }
    .xb-searchWrapper
    {
        order: 2;
        margin-right: auto;
    }
    .p-nav-opposite
    {
        order: 3;
    }
}

 

[Rapmania]

You are great! Thank you @Russ

 

[Rapmania]

Can you help with one more thing please @Russ
-
I want it to appear in the navigation when I lower the page. When the page is at the top, it stays in the header.

 

[Russ]

This technically happens at a "medium breakpoint". You can add this to make it happen sooner:

@media (max-width: @xf-responsiveWide)
{
    .p-nav .p-nav-opposite
    {
        display: block;
    }
    .p-header-content .p-nav-opposite
    {
        display: none;
    }
}

Or adjust the value manually:

@media (max-width: 1200px)
{
    .p-nav .p-nav-opposite
    {
        display: block;
    }
    .p-header-content .p-nav-opposite
    {
        display: none;
    }
}

 

[Rapmania]

This technically happens at a "medium breakpoint". You can add this to make it happen sooner:

@media (max-width: @xf-responsiveWide)
{
    .p-nav .p-nav-opposite
    {
        display: block;
    }
    .p-header-content .p-nav-opposite
    {
        display: none;
    }
}

Or adjust the value manually:

@media (max-width: 1200px)
{
    .p-nav .p-nav-opposite
    {
        display: block;
    }
    .p-header-content .p-nav-opposite
    {
        display: none;
    }
}

nothing changed.

Print.

İt's true.

it's false X.

 

[Russ]

Are you referring to having it appear when the navigation is stickied?

Try this:

.is-sticky .p-nav .p-nav-opposite {
    display: block;
}