Sidebar Size CSS

Alex_Marsh

I've made the sidebar a little bigger (100px) in the CSS to cope with the increased text size required, however when the subpanel appears it is slightly behind the bigger sidebar. I can see from monitoring the css with the dev tools that the panel hides when not selected and appears at a position of 80px from the left when it appears. How can I go about adjusting this?
Hope that makes sense!

Martin_Blomgren

There are two ways to accomplish this!

1. Use custom CSS, with this alternative you have tor animate the smooth flyout animation when the subpanel appears.

.nav_trigger.nav_open .sub_panel {<br>&nbsp;&nbsp;&nbsp; animation: movesubpanel 0.2s linear forwards;<br>}<br><br>@keyframes movesubpanel {<br>&nbsp;&nbsp;&nbsp; from { left: -220px; }<br>&nbsp;&nbsp;&nbsp; to { left: 100px; }<br>}

2. Use custom JS and overwrite the standard function which returns the sidebar width. Probably not supported, however it's easy to disable if you encounter problems of any sort!

$(document).ready(function (){<br>&nbsp;&nbsp;&nbsp; app.getSideNavWidth = function(){ return 100 }<br>}

Martin_Blomgren

There are two ways to accomplish this!

1. Use custom CSS, with this alternative you have tor animate the smooth flyout animation when the subpanel appears.

.nav_trigger.nav_open .sub_panel {<br>&nbsp;&nbsp;&nbsp; animation: movesubpanel 0.2s linear forwards;<br>}<br><br>@keyframes movesubpanel {<br>&nbsp;&nbsp;&nbsp; from { left: -220px; }<br>&nbsp;&nbsp;&nbsp; to { left: 100px; }<br>}

2. Use custom JS and overwrite the standard function which returns the sidebar width. Probably not supported, however it's easy to disable if you encounter problems of any sort!

$(document).ready(function (){<br>&nbsp;&nbsp;&nbsp; app.getSideNavWidth = function(){ return 100 }<br>}

Alex_Marsh

Ah Martin, the King of the community forums! The CSS works a treat, thanks so much for the quick response! p.s. loving your portal js customisations