Author: Rob Hobson

Switch The Normal Divi Menu To the Hamburger Menu on Smaller Screens

If you’ve got a particularly wide menu that’s wrapping on smaller screens, there’s an easy fix for it. Using a simple media query, you can swap the normal desktop menu out for the mobile version (hamburger – the three horizonal bars you see on mobile phones). Add the following CSS and adjust the max-width to determine when the hamburger replaces your normal Divi menu. A max-width of 1024 pixels should be good to wrap on tablets but by increasing this amount you can achieve the same effect on smaller desktop and laptop screens. I’m sure that will take care...

Read More

Increase The Width of the Divi Vertical Navigation Header Format

While working on a new site for a client who wanted the Vertical Navigation Header Format, I decided that the width needed to be increased. After a little scratching I got it right with the CSS below. As you make your side menu wider your logo will grow with it. UPDATE: If you have issues with the text of the menu wrapping, use pixels rather than a percentage and then manage it with a media query so that it doesn’t mess you around on different screen sizes. If you need help with media queries, check out Media Queries...

Read More

Your Guide to the Google Fonts Available in the Divi Theme (Printable)

A great looking website is a combination of layout, images, and typography and as the tone of your voice sets the scene of a conversation so too does the typography, giving your site a particular personality. Typography is the art and technique of arranging type. It involves the thoughtful and deliberate selection of typefaces, point size, line length, leading, tracking, kerning, color and any element that can affect a design. Readability is primarily the concern of the typographer or information designer. In websites, consistency is key in the use of typography. AWWWARDS – Typography Choosing Fonts Two things to consider when choosing...

Read More

Sketch your layouts on paper with the Divi Theme printable Browser Window by Divi Notes

For those of you who use paper to do your wireframing, here’s a printable that I hope you’ll find useful. I’ve worked on a Full HD display width of 1920 pixels, and a standard Divi column width of 1080 pixels. On a Full HD display, your viewport (above the fold) is roughly 950px which I’ve also indicated on the printable. As variety is the spice of life, you can check out two other great alternatives: Paper Browser by Printable Sketch Sheets by Let me know in the comments if there’s anything I’ve missed or any ideas you have...

Read More

From Our Sponsors


Follow Us on WordPress

Follow Divi Notes on


This site contains affiliate links. Hopefully you'll click on them and help keep this site online and fresh! :) Oh! And then there are those cookies! It's the way the web remembers things. If you don't like them please don't use this site.