Responsive Header Fix in Divi - When the Window Shrinks and The Logo and Menu Get Messed Up!

I love Divi and many of the manual fixes I've had to make over the years have been fixed with updates to make my life simpler. One problem that has not yet been fixed is the responsiveness of the header.
If you've build Divi sites, you've probably noticed this. When you shrink the window width down to a small monitor or tablet size, the menu often goes to 2 lines which expands the logo. The menu text then gets overlaid on the logo and it looks awful.
I've never found a fix for this with built in Divi settings. In this video, I show you the problem and my fix using the CSS below.
#Div
#WordPress
#MobileHeader
/* TOP HEADER RESPONSIVE FIX */
@media all and (max-width: 1200px) {
#top-menu a {font-size: 14px !important;}
#top-menu li {padding-right: 4px !important;} }

[@nikiemarston7795]

2 years later and they've still not fixed it, but you absolute star for posting this, happy me, happy client!

[@Webeminence]

I think they have made some updates to the latest Divi versions that makes it a little better. The menu collapses to 2 lines rather than overlapping the logo.

[@007webby]

Thank you! This drives me nuts too! :)

[@horaciobrambila3581]

thanks so much my friend... it really help to me...!!

[@nickradcliffe6691]

Thank you!!

[@stadtaffelandei6380]

Subbed! Thanks so much. I have a similar problem with the typography of my header. When I shrink the screen, the last letter of the name of my website jumps into a second line until it gets smaller and adjusts to the smaller text size for tablet / mobile.
On other websites the text just starts to disappear on the right until it’s on tablet / mobile size and shows the smaller text size. Is there any way to fix this? Some code or something?

[@Webeminence]

Yeah, this is exactly the fix I describe in the video.

[@indaskys]

Thank you so much been trying to figure this out for so so so long you really helped out,, i see when viewing on some laptops screen sizes around 1300 pixels wide iv got the menu sorted from your amazing help, but how would i adjust some of the other content thats shifting out when view on 1300 px wide but looks good on 1920 to 1500 px wide screens, if can fix this then thats incredible. THANK YOU

[@Webeminence]

Other elements in Divi you mean? Each module/section/row has it's own controls so you'll have to edit widths there.

[@user-tk8fh3ge1u]

Hey, thanks for your great tutorial! I have exactly the problem you describe, however the code does not change anything for me. I have created my menu with the Global Header. Could it be that the code should be different then? I would be super happy if you could help me, I'm looking for a long time now for a solution to the problem. Thanks!!!

[@Webeminence]

This fix only works for the built-in header menu. If you create a global header in the Theme Builder, you can edit the responsiveness right there. I have another video that applies to those types of changes. th-cam.com/video/Dwos8T2YwE4/w-d-xo.html

[@tomfraser3086]

I am having an issue with the header I designed in the theme builder. Logo on the Left, Menu on the right. When I check it on Tablet and Cell the 2 rows stack instead of being side by side,,,,What am I doing wrong ?

[@Webeminence]

2 rows often stack on smaller screens. That's normal. I don't see any way on mobile except using some of the transform properties.

[@yahirrodriguez-sanchez8501]

This is super late, but to fix this, go to the row > advance > custom CSS > main CSS. Then, copy this code into there: display: flex;

[@Hsa008]

Bro after creating landing page in divi how will i import it to clients wordpress or other website(if he is using different theme)?

[@Webeminence]

Hi - this is unrelated to this video. However, I've created landing pages for clients and put them on a sub-domain. So if the website is webeminence.com, I would put a landing page on website.webeminence.com for example. Then I would install Divi on that subdomain.

[@Hsa008]

@@Webeminence thank you very much. I sm your new fan

[@MelissaHeyes-zy4mr]

I've followed these instructions, but I'm wondering if it's not working since my header is created through the Theme Builder? Is there a way to fix this issue and also use the Theme Builder Header?

[@Webeminence]

Yeah, this is only for the default header. If you build it in Theme Builder, you then have all the controls in the normal builder for device specific changes.

[@kyneba6988]

Hey ! I'm having the same problem here, I tried this but it doesn't work unfortunatly. Do you know an other way to have a responsive header please ?
My logo and menu and the basket won't stay on the same line..

[@Webeminence]

You probably just need to continue adjusting settings. You could use the Divi Theme Builder to build a custom menu

[@poolman20001]

it should remain sticky, and unresponsive until it changes to tablet. That's what I always thought would fix it.

[@lonewalker9632]

same probem, i am designing on a 1920 resolution, when i see it on a big screen (1920) resolution, everything is messed up

[@Webeminence]

Not sure I understand the problem. Follow the video and read comments. It works so you must be doing something wrong.

[@morganhunter2102]

Ryan, this works for me but doesn't stick after refreshing more than once.

[@Webeminence]

Not sure what that could be but sounds like a caching issue in browser. Sometimes I do a hard refresh after changes (Control + F5)

[@indaskys]

1 other thing that would be amazing if you can share your knowledge i would like to have my menue snap to the compact version at 1101 pixels wide as at 1100 it looks messed on pc till it goes to tablet version at 980 pixels wide, cause if make all fit in those sizes the menu text will look to small so would love it to snap to the compact menu earlier at 1101 pixels, thanks :), great video, thumbs up x100

[@Webeminence]

You can adjust the pixel width in the code until you get it where you want it. It's usually a guess and check.

[@indaskys]

@@Webeminence thanks i cant find the code been loking for 2 days, iv found the code to change the menue break point @media all and (max-width: 1480px) {
#top-menu a {font-size: 11px !important;}
#top-menu li {padding-right: 4px !important;} }
@media (max-width: 1100px) {
#et_mobile_nav_menu {
display: block;
}
#top-menu {
display: none;
}
}
but now need to get code to change my page or rows or sections, thanks for your amazing quick response

[@Webeminence]

I posted that code in my description. That just changes the size of the font, padding, and the break point. I'm not sure where the code is that changes to the compact version (hamburger menu) but that's in the style.css. You can search elegant themes support forum too. Lots of good info in there.

[@GOGOAKUMAN]

Wow, same here in end 2023.

[@kshetrimayumgulson6378]

Elegant Theme might be doing this issue INTENTIONALLY to sell 3rd product MOBILE PLUGINS. It is BUSINESS.

[@Webeminence]

I don't think so. It's not fixed by a plugin they are selling.

[@jovylouverzano]

That is not the smartest way. Especially if the design mockup you have to follow has a specific menu font size ie: 18px, 22px etc
Try fluid css
@media all and (min-width: 981px) and (max-width: 1920px){
font-size: calc(15px + (18 - 16) * ((100vw - 981px) / (1920 - 981))) !important;
}

[@Webeminence]

Thanks - I'll look at it. I'm sure there are some ways to use vw instead of pixels but that often presents other issues. Nobody wants to do that much math though!

[@jovylouverzano]

@@Webeminence it's not really hard once you get the concept. It works on padding and margins too and other css property. Very helpful code when it comes to responsiveness.

[@kshetrimayumgulson6378]

The css has error with red mark . Please repost with correction.