Can't get mobile menu icon in same row as logo at top of screen
lösung
I'm working on https://blog.esprezzo.io and I can't figure out how to get the mobile menu / hamburger icon to the right of the logo so that the nav bar only takes up 1 row.
This is very annoying, as the nav bar is sticky and takes up too much space.
Your website is making use of Hubspots default framework. This is pretty similar to bootstrap2. It uses floats to structure rows, and span* classes (span4, span8, etc) to distribute space to sections within those rows.
This framework has media queries that remove float and width controls from the span* classes to force everything into a column layout. Here is a video I took while playing with your site:
a simple solution to this is to scope the span* classes in use to a class specific to the header, re-add the float to these elements, and force a percentage for both that does not exceed 100% when added. I have tested this css on your page and it does what you are needing:
Your website is making use of Hubspots default framework. This is pretty similar to bootstrap2. It uses floats to structure rows, and span* classes (span4, span8, etc) to distribute space to sections within those rows.
This framework has media queries that remove float and width controls from the span* classes to force everything into a column layout. Here is a video I took while playing with your site:
a simple solution to this is to scope the span* classes in use to a class specific to the header, re-add the float to these elements, and force a percentage for both that does not exceed 100% when added. I have tested this css on your page and it does what you are needing: