Can't get mobile menu icon in same row as logo at top of screen

SOLVE
Highlighted
New Contributor

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.

 

Would love any help figuring this out!

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Esteemed Advisor | Partner

hi @esprezzo-jialin  , 

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: 

 

https://embed.vidyard.com/share/WWwjKTymxmt1w9L8P9qD8q?

 

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:

@media (max-width: 768px) {
.custom-header .span4, .custom-header .span8 { float: left; width: 50%; }
}

Let me know if that helps.

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
2 Replies 2
Highlighted
Esteemed Advisor | Partner

hi @esprezzo-jialin  , 

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: 

 

https://embed.vidyard.com/share/WWwjKTymxmt1w9L8P9qD8q?

 

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:

@media (max-width: 768px) {
.custom-header .span4, .custom-header .span8 { float: left; width: 50%; }
}

Let me know if that helps.

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
Highlighted
New Contributor

That was very helpful @Jsum ! Thank you.