Hello,
I am building myself a template off of the HTML5 Responsive Boiler Plate and when adding an off-canvas navigation I noticed that the header collpases at times when resizing the page / browser.
When making the browser bigger, than 481px I think, the header seems to collapse to 0 height and then instantly come back to its normal height.
And, when under 481px and the off-canvas nav is trigged by clicking the navigation-list icon that then appears, it collapses to 0 width ( from right to left ) when the nav is either closed or opened ( by clicking on the navigation-list icon / 3 bars ).
I would greatly appreciate any and all help finding out why this happens and fixing it.
Just to make the experience smoother and less-flashy ( not as in Flash, but as in a literal flash ).
You seem to be adding a fixed height to the header-container for less that 480px devices so you get a transition to the height but when you go wider you have auto height and transitions don’t work with auto height so you get a transition from zero to the height set for small devices and then nothing for wider devices.
You would be better off removing the height from the header-container for all widths.
Hey @team1504 ;
We’ve built a new product at SitePoint to help people solve CSS problems in real-time. Yours looks like one that we could easily help you fix immediately.
One of our CSS experts is online now and ready to help if you’re interested.
First, I do recommend anyone who has a CSS issue to try out CodeFix as it is great.
I think my issue may have been a little more complicated for it though.
I thought we had found a solution and there was someone new waiting so we ended the CodeFix chat, but i realised that the solution presented was to give .header-container a height of 7em.
Right after I made that change, I noticed that although the transitions were smoother, the width collapsing still happened to the header when the navigation-list icon was clicked.
And, then, I noticed that I had a height applied to .header-container. Except it was in px units and @Paul_O_B told me to remove it.
Is it that EMs make smoother transitions that PXs or is there a better solution?
The code I gave fixed the collapsing of the header that you were talking about because there would be no transition and just a change. Alex probably suggested using a height so that either you get a smooth transition between heights or indeed keep the height the same so that there won’t be an issue. ems or px should make no difference to the transition but of course ems are preferable measurements where possible.
Regarding the width of the layout the it’s basically the same problem. You have transitions set on elements so when something changes you get the transition. When you click the nav and the column slides out you are setting the page width to 80% so the transition goes from auto (effectively zero as far as transitions are concerned) to 80% and vice versa.
It’s a big drawback of transitions that they don’t work on auto dimensions which is usually what you want.
You could set the page wrap to 100% wide and then the transition will be smoother.
e.g.
Code:
#page-wrap{width:100%}
It should now slide from 100% to 80% and vice versa. There may be other inner elements following the same pattern so you would need to do similar.
Transitions work best when you go from one fixed dimension to another.