Side navigation

[chojo]

Is it possible to have the site centered, with "auto" right and left margins, while having navigation on the side of the forum, a bit like "Canvas" mode?
From what I understand, the "Canvas" navigation is always pinned to the right of the site and cannot be centered next to the forum?

 

[Russ]

You can add:

.xb-page-wrapper {
    max-width: 1600px;
    margin: 0 auto;
}

To your extra.less and it will put a max-width on the container and center it. You might need to make some further adjustments to make it look a little normal.

 

[chojo]

You can add:

.xb-page-wrapper {
    max-width: 1600px;
    margin: 0 auto;
}

To your extra.less and it will put a max-width on the container and center it. You might need to make some further adjustments to make it look a little normal.

Is it possible to only applied that to the forum body and canvas navigation, not the actual top header bar where the logo and the search is?

 

[Russ]

This should do it:

.canvas-wrapper {
    max-width: 1600px;
    margin: 0 auto;
}

 

[chojo]

This should do it:

.canvas-wrapper {
    max-width: 1600px;
    margin: 0 auto;
}

Yes it work.
if I want the content of the top header bar to be the same width as the forum content, is it possible to accomplish?

 

[Russ]

Yes it work.
if I want the content of the top header bar to be the same width as the forum content, is it possible to accomplish?

View attachment 14946

Little different edit.
Open PAGE_CONTAINER:
You need to go down to the canvas-header area and essentially add another div around the logo + visitor tabs. Add:

<div class="canvas-header-inner">

Just below:

<div class="canvas-header" data-xf-init="sticky-header">

And then the closing div in the same spot.


Remove the CSS I gave above and add this:

.canvas-header
{
    display: block;
    .canvas-header-inner
    {
        max-width: 1600px;
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: 100%;
    }
}
.canvas-wrapper
{
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

This will make it so the background of the bar extends 100% of the page but the contents are kept at page width.