Need for three or four sizes for headers set as vertical

Feature Requests
1

Hi!
The headers set as vertical have a too wide horizontal size.
In order to fix it, I would suggest Softr to create three or four sizes when the header is set as vertical.
The L size would be the actual size.
The M size would a size like the slack lateral navbar
The S size with a width of 10% less than the size of the slack lateral nav bar
The Xs size with a width of 20% less than the size of the slack lateral nav bar

Ps: I know the custom code to reduce the width of vertical headers. I just want it native please!

Thank you!

3 Likes
2

Hello @matthieu_chateau,

I will let the team know about this suggestions :slight_smile:

Thanks

1 Like
3

Hi @matthieu_chateau , could you kindly share the custom css code to reduce the width? I also have the same issue… It’s too wide!

Thanks a lot!

Ps: I hope that the softr.io dev team add your suggestion to the product soon.

4

Hi!
Warning: header blocks went to react framework, so I’m not sure if this still works. Just give it a try, or try to change it if you have custom code skills.

<script> 
document.addEventListener("DOMContentLoaded", function() {
$("nav[id^='home_header'].navbar-vertical").attr('style','width: 265px!important; opacity: 1; visibility: visible;');
$(window).resize(function(){
    if ($(window).width() > 999){ 
        $("nav[id^='home_header'].navbar-vertical").attr('style','width: 265px!important; opacity: 1; visibility: visible;');
    }   else {
        $("nav[id^='home_header']").attr('style','width: auto!important; opacity: 1; visibility: visible;');
    }
});
});
</script>

To change the width, change this part : width: 265px!important
You can also change the Id of the header
To be put in the footer custom code!

This code snippet is kindly given by @SonNguyen (I think you can ask him an update, if you have any problem with it)

1 Like
5

Thank you for your help!
the code did not work. Also I tried to change “home_header” to “home-header” since softr does not allow _ on the Id tag.

I was able to find a solution just by touching CSS. Maybe not the best…

Add to header:

<style>

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

@SonNguyen

1 Like
6

For the record:
I updated the code, it should work. But your code is better, all elements of the page response better all together with CSS

<script> 
document.addEventListener("DOMContentLoaded", function() {
$("#header3").attr('style','width: 240px!important; opacity: 1; visibility: visible;');
$(window).resize(function(){
    if ($(window).width() > 999){ 
        $("#header3").attr('style','width: 240px!important; opacity: 1; visibility: visible;');
    }   else {
        $("#header3").attr('style','width: auto!important; opacity: 1; visibility: visible;');
    }
});
});
</script>
1 Like