ICON stack make header full-width above sidebar

[jrhager84]

I’ve tried to use code that was provided in a previous thread, but it did not give me my desired results. I’d like the ability to basically have a full-width header (instead of cutting off at the sidebar start). Second, I’d love to set the sidebar to static, so it scrolls with the body content. How would I achieve this? Thanks!

[christopher]

Hi @jrhager84,

The whole point of the ICON stack is the fact that the sidebar is separate from the content section and scrolls separately. The whole stack is structured to have that ability. It is not possible to change that behavior as it will need to recode the whole stack. The best way for you is to use other stacks instead of ICON.

The same rule applies to the header section which you talked about. There will be no robust way to achieve the effect you like without extensive Javascript customization which is outside of our support scope. But if you want to have a partial CSS case you can add the CSS code below to X > Theme Options > CSS:

.masthead {
    margin-left: -295px;
    z-index: 999999;
    
}

.x-sidebar-content-active .x-sidebar {
    top: 116px;
}

The problem with the code above is that as soon as you scroll down the top section of the sidebar will have an empty space as we had to add the space at the top so that the Sidebar will not go behind the header.

In general, you will find no satisfactory solution as you want to force a stack to look like in a way which it is not designed for in the first place. So the best way as I already mentioned is to change the stack.

Thank you for your understanding.