Vertical header cuts into the screen and blocks with containers. How can I fix this?

Hey guys,

If I add a vertical header to my application, it makes everything REALLY tight on the screen, making the website feel very intense.

For instance, I can’t use any of the blocks where I added a container as it cuts into the container.

Is there a way to preserve the outline / “zoom out” a little on the pages?

Thanks so much in advance for any tips! :slight_smile:

2 Likes

Hi Tim,

One way would be to reduce the size of the vertical header width, what do you think? (doable)

Hey Matthieu,

I’ll try it for sure. I thought maybe there was also a way to shrink everything else :smiley:

Has the custom code for reducing the width already been posted somewhere? I couldn’t find it :slight_smile:

Here it is:

To be inserted in the header custom code of the page (in a <style> </style> if you don’t have it yet)
Change header1 by the header Name/ID
Change the two 240px by whatever you want (but check how it looks first with this reduced width).

@media only screen and (min-width: 992px) {
#header1 {
    width:240px !important;
    margin-left: 0 !important;
}
.content[data-appid] > * {
  margin-left: 240px !important;
}
}
1 Like

Also if you want to shrink what’s to the right of the vertical header:

@media (min-width: 990px) {
    .container {
        width: 80%; 
        margin: 0 auto;
    }
}

Be cautious with this one and test it carefully so that it doesn’t create a visual bug somewhere

1 Like

Amazing, testing it now. Thanks so much, Matthieu!!!

I encounter one problem here, I use headers based on user type, so if I add the code on app level, it will create a whitespace as a vertical header always, also for non-logged-in users.

Any idea for a workaround there?

What is the code you are talking about?

This one :mag_right:

@media only screen and (min-width: 992px) {
#header1 {
width:240px !important;
margin-left: 0 !important;
}
.content[data-appid] > * {
margin-left: 240px !important;
}
}

You would need to change #header1 by another blockId. Or to change the IDs of headers to match header1 in the code. Or to insert this code at page level (each page where you want this behaviour to happen).

If you have multiple headers the code you need is:

@media only screen and (min-width: 992px) {
#header1,
#header2,
#header3 { //etc.
    width:240px !important;
    margin-left: 0 !important;
}
.content[data-appid] > * {
  margin-left: 240px !important;
}
}