Changing your hamburger menu colour in Divi WordPress

I often came across this little problem – I want my menu bar to be the same colour as my high light colour in Divi. It caused me all sorts of problems and in this tweak Im going to show you haw to fix on of the most common issues, the hamburger menu colour.

The great thing about this tweak is it can be used for any site in any situation because you may want to change that colour for other branding reasons.

No with this simple snippet you can.

Just paste the below snippet in the custom code area and you are have resolve the situation.

You can set the colour value to be any value you need.

If you need a more in depth review – please watch the screencast video and enjoy this weeks tweak of the week.

Tweak of the Week – How to clear the Local Storage

When you are editing Divi Websites you need to be able to clear local storage whenever you update your divi modules.

This is especially true for any of the updates we do here with our modules at Divi Framework.

Watch the tweak of the week screencast to work out how to clear the local storage and save lots of pain in Divi Module Updates.

What is Local Storage?

Local storage is a way your browser stores information. As a web developer the only way we originally could do this was with a cookie or a static asset. Now that we have HTML5 we have the ability to store data locally in your browser.

This is really useful for web-apps because database style information can be stored in your browser.

How does Divi Theme use the Local Storage?

The Divi Builder is the area of Divi Theme that makes heavy use of the local storage. Local storage is used specifically for storing a list of module types, the version of Divi Builder and the great copy and paste features we all have grown to love.

This love sometimes turns into pain when we get nagged to update the Divi Builder and clear the browser cache. By using this command for clearing the local storage you can ensure you rid yourself of these nags without having to clear your entire browser cache.

In Chrome you open your developer tools. You can do this by using the Chrome Menu at the top-right of your browser window,then select More Tools > Developer Tools. You can also use a shortcut of ctrl + shift + i in windows.

Once you have the developer tools open select the console tab and type into the console your local storage clear command.

localStorage.clear()

This will clear out all those stored values.

How can I see the stored values?

You can select the Application Tab. In hear you have a number of options to view Local Storage, Session Storage, Cache storage and more.

You also have a short cut key in here to clear the storage and check service workers.

These are all essential to Progressive Web Apps and the new breed of HTML Applications.

To learn more about this take a look at the official documentation.

Are you a member of Divi Framework?

Get a great bunch of free tools for your Divi powered WordPress site. Signup for FREE as a member at Divi Framework.

Having Multiple colours in your submenu with Divi

In this screen cast I will cover a quick and simple tweak for having multiple colours inside your Divi Submenu items from the Main Menu.

This is a really effective tweak for making each section different than the other and to create a bit of a distinct look and feel. This works really well for Product based websites.

The CSS snippet in the Screencast can be found here

Or you can copy it from below.

Hope you guys enjoy this tweak of the week and look forward to the next one.

You can subscribe to my youtube channel so you are notified each time a new tweak is released.

 

Divi Breadcrumb CSS

I created a quick video for everyone on the CSS edits for Divi Breadcrumb Module at Divi Framework.

This is a simple little edit that I perform on a lot of sites when using the breadcrumb so I wanted to make sure you were all aware of how to do it.

Watch the video below and let me know what you think.

The Gist for the code is also available here.

For those wanting to see the effect you can see it in use on our own website.

The website we used for the demonstration is think.digital

WooCommerce 3.0 and Divi

We had a great announcement from the WooCommerce team with 3.0 being released in the past week.

It has some amazing features particularly the API setup and oAuth 1.0a. Im really excited about getting my teeth into that for some of our integrations.

However Divi is currently not compatible with the upgrade. Its important to make sure that you do no upgrade to WooCommerce 3.0 with Divi at its Version: 3.0.40. You will get errors in the product layout page.

Im looking into how to deal with this in the short term but the best thing to do is not have your site auto update.

In the meantime checkout the latest news on WooCommerce 3.0 and hopefully the release for the fixes from Divi will come very soon.

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation