CSS Clamp Fully Responsive Menu

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

In this tutorial we will be creating a dynamically-sized responsive header with 'fluid typeography' in Divi (CSS Clamp Function). This will scale all the way from the mobile/tablet breakpoint, displaying a full menu on iPad and other tablets. Logo and type size will scale smoothly as the viewport scales.

CSS

/* Enable full menu on tablet */

@media all and (min-width: 768px) {
#fluid-header .et_pb_menu__menu {
display: block;
}

#fluid-header .et_mobile_nav_menu {
display: none;
}
}

/* Use 'clamp function to size logo */

#fluid-header img {
max-width: clamp(150px, 20vw, 350px);
}

/* Use 'clamp function to size menu links */

#fluid-header a {
font-size: clamp(14px, 1.5vw, 22px);
}

/* Use 'clamp function to size dropdown link */

#fluid-header li li a {
font-size: clamp(12px, 1.5vw, 18px);
}

/* Use 'clamp function to size menu LH padding */

#fluid-header .et_pb_menu .et-menu li {
padding-left: clamp(2px, 1vw, 20px);
}

Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites.

If you purchase a Divi licence using the following link, I will earn a commission from Elegant Themes which helps support my channel. See the Elegant Themes site for details. Thanks in advance!

By using these affiliate links I will earn a referral commission which helps support my channel.

[TerryHaleMizagorn]

Another wonderfully executed tutorial, Paul! You have quite a gift. I can't believe I wasn't already subscribed! I am not much of a video watcher, but I thoroughly enjoy yours. You make everything seem so easy to execute and understand both.

[TroyParker-efrg]

Excellent video tutorial! Your explanations and demonstrations are super clear and so practical!

[GirishDadlani]

All your tutorials are really awesome. I wish you would do more of this. I have seen a lot of tutorials on DIVI on youtube. Yours really stands out! It adds a lot of value and the explanation is also simple and spot on. Thank You and hope to see more of your tutorials!

[avabelho]

Hi Mr. Paul, You are such a good teacher and enlight my Divi life, thank you, blessing.

[thebibleproof]

Hello Paul, I share Terry Hale's sentiments. You just became my go-to Divi tutor, even though I am not a beginner. The joy of clamp() and fluid dynamic element resizing has fascinated me since it first appeared in CSS3, but we still rarely see it being used. Guess you have a lot more great tips, so I am subscribed :)

[tomfraser]

Brilliant...I've been thinking about this for quite a long

[FabianFerdinand-xwso]

Great video. there should be more videos of this quality!

[stringks]

Thank you very much for sharing your knowledge! Very well, precise and clear explained. And you have saved my day too.

[alvarocarrilho]

Very useful menu tutorial, I Struggle so much with the design of this module - trail and error - should I put the typography in px, in em, in REM.... I've started my CSS journey and now I realized that this is the way to go. Thks from Lisbon - Portugal

[sabinevanerp]

Thanks a lot for your excelent tutorials!!

[jsmakkar]

Good to have learnt something new here i.e. the Clamp function. Thank you!
Can we have a tutorial on Divi Mobile Menu that covers Full Screen?

[alh]

Hello Paul and thank you very much for your very well explained video.👏
I have a question, please, does the code you have done work if I prefer to make a header with 3 modules (image - menu - button) or do I have to add xode css? if so, can you help me please?
thank you again and good luck 🙂

[darndarn]

Is this something you still use here in 2024 ? Really interesting this. Going to see how I can use this for a mega menu I am about to use

[Brian_skydives]

Hi Paul, another wonderful video! Thank you for your coaching. Do you have a video or is there any way you could do a video on modifying the mobile dropdown hamburger menu? I'm hoping to achieve the following:

Opening the mobile menu opens it in the full viewport (height & width).
The primary menu item labels should all be left justified and there should be a dropdown logo on each primary menu item which has sub-items (which should be right justified).
Clicking on the dropdown logo should expand the primary menu item and show the sub-items (which are hopefully indented to the right by some amount).

I realize this is asking a lot, but it just feels to me like this sort of mobile menu layout should be standard or easily settable in Divi anyways!

[MrBullwinkle]

Subscribed! I have a completed site. Can I "retrofit" this to my existing header?

[cosmicmonkeys]

great tutorial - unusual comments in CSS: (/* Enable full menu on tablet /) - don't seem to work in my browser - Comment convention am not aware of? - thanks for your no nonsense approach & tutorials

[mnburch]

I love your tutorials! I wish there were more of them. You are an excellent teacher. I am having a terrible time when it comes to making my Divi design responsive. Modules that display fine in desktop mode just disappear for no apparent reason in responsive mode. When I display layers and to into the settings for a text module that displays fine in desktop mode, the text box is blank!!! Other modules simply disappear as well (image, etc.). This occurs in Safe Mode as well. I am at wit's end! Any ideas as to why this might be happening? I've googled this extensively, but to no avail.

[archiefatcacky]

Thanks for the video. I've seen many similar tutorials but am yet to see anyone explain (simply) how to arrive at the middle value (vw) in the clamp formula without a lot of frustrating trial and error. Do you have any tips on arriving at this value so that if e.g. max is 23px and min is 16px, how do you arrive at a vw figure that will linearly reduce or increase in size between the max and min values? Many thanks

[mbownes]

Hi Paul in the code you have duplicated the comment /* Use 'clamp function to size logo */, it is the same for the anchor tag. Thanks for the great videos!

[gatorgrowl]

Would his work with 3 elements in the header (logo, menu, and social media icons)?