Header and Breakpoints

[AshleyF]

I am trying (and struggling) to create a header that looks good on large desktop and works well on medium and larger tablets until it hits the mobile phone breakpoint hamburger menu.

The question I have is about the changing of the main Navigation menu font sizes and slight positioning changes of the logo. Am I best to do this with CSS at the various breakpoints or is there an advantage for using the Cornerstone builder and creating a different header for each breakpoint? I assume that’s a cumbersome way of doing it, or does it offer better control?

One slight issue I have found trying to use CSS is some font changes don’t reflect in cornerstone visual viewer but if I save and view on a browser at that breakpoint the change as worked and is reflected at front end. The problem of course is w when trying to work out if you have the right CSS I prefer to have it reflect within cornerstone (and and it does 90% of the time).

[prakash_s]

Hello Ashley,

Thanks for writing to us.

You can set the different Header Bar for different brackpoints or you can use the font size, padding, and margin, etc in EM and VW unit to get the fluid size for each breakpoint. Custom media query is another way to style to achieve it.

Watch out for the coming Responsive Styling feature though as that might open some possibilities for this case. More coming soon features were mentioned here https://theme.co/content/status-report-may-14-2021

It might be the cache issue just because the styling is not rendering in the Cornerstone page builder mode. In case if you are using any JS/CSS minification and cache plugin I would suggest you purge all the cache, clear your browser cache and deactivate the cache plugin then check it acgain. It would be best if you could check it in the private mode of the browser.

Thanks

[AshleyF]

Hi Prakash,

The responsive styling sounds perfect, do you know when that is likely to be released?

[ruenel]

Hey Ashley,

We do not have an ETA yet. We are still waiting for the beta release. In the meantime, you can check out our video demos of how you can create responsive headers with the header builder.

Hope this helps.