In this tutorial I’ll show you how to make the Divi Centered and Centered Inline Logo headers look like the slimmer Default header on mobile. This will help you save more space on small mobile screens.
Table of Contents
Demo
Why do this?
On mobile, the Centered and Centered Inline Logo header styles add a large “Select Page” bar under the logo and extra padding that eats up screen space – especially if you are using a fixed header on mobile.
By restyling these header styles to mimic the Default header you get more room for content and a cleaner look.
Implementation
To accomplish this task I have come up with the CSS snippet provided below, complete with comments that explain what each section does.
Just add the CSS to your Divi site using one of these methods:
- add it into the Custom CSS field in Divi → Theme Options → General
- add it into the Additional CSS field in Divi → Theme Customizer → Additional CSS
- add it to you child theme style.css file.
/* Make Divi Centered and Centered Inline Logo Header Bars Look Like The Default Header Bar On Mobile */
@media all and (max-width: 980px) {
/* align header container text to left */
.et_header_style_centered #main-header .container,
.et_header_style_split #main-header .container {
text-align: left;
}
/* set max width for logo container and bring it above the navigation bar to make it clickable */
.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
position:relative;
z-index: 2;
max-width: 50%;
}
/* move split header logo to left */
.et_header_style_split header#main-header .logo_container {
float: left;
}
/* prevent the split header logo from shrinking by increasing its max width */
.et_header_style_split #logo {
max-width: 100%;
}
/* adjust top navigation alignment */
.et_header_style_centered #main-header div#et-top-navigation,
.et_header_style_split #main-header div#et-top-navigation {
position: absolute;
}
/* make "select page bg color transparent" */
.et_header_style_centered #main-header .mobile_nav,
.et_header_style_split #main-header .mobile_nav {
background-color: rgba(0, 0, 0, 0);
}
/* remove mobile_nav left and right padding */
.et_header_style_centered #main-header .mobile_nav,
.et_header_style_split #main-header .mobile_nav {
padding: 5px 0px;
}
/* remove unnecessary top margin */
.et_header_style_centered #et_mobile_nav_menu,
.et_header_style_split #et_mobile_nav_menu {
margin-top: 0px;
}
/* hide "select page" container */
.et_header_style_centered #main-header .mobile_nav .select_page,
.et_header_style_split #main-header .mobile_nav .select_page {
display: none;
}
/* adjust vertical and right alignment of the mobile menu bar */
.et_header_style_centered #main-header .mobile_menu_bar,
.et_header_style_split #main-header .mobile_menu_bar {
position: relative;
right: 0px;
text-align: right;
}
/* adjust dropdown menu top offset */
.et_header_style_centered #main-header .et_mobile_menu,
.et_header_style_split #main-header .et_mobile_menu {
top: 63px;
}
}
This CSS adjusts the appearance of the mobile header only, without touching the desktop layout. So, you will still have the normal Centered or Centered Inline Logo header layout on desktop.
However, on mobile devices (< 980px) it will look like the Default header bar. This solution does not switch header types but only re-styles the header bar.
Adjustments for the Mobile Menu Customizer plugin
If you are using the Divi Mobile Menu Customizer plugin and would like to implement the CSS provided above then you will need to add the following CSS snippet too. It fixes the menu hamburger background color and minor alignment issues.
/* Adjustments for the Mobile Menu Customizer plugin */
@media all and (max-width: 980px) {
.chi_dmm_styles.et_header_style_centered #main-header .mobile_nav,
.chi_dmm_styles.et_header_style_split #main-header .mobile_nav {
display: inline-block;
float: right;
background-color: rgba(0, 0, 0, 0);
}
.chi_dmm_styles.et_header_style_centered #main-header .mobile_nav {
padding: 10px 0px;
}
.chi_dmm_styles.et_header_style_centered #main-header .mobile_nav .mobile_menu_bar,
.chi_dmm_styles.et_header_style_split #main-header .mobile_nav .mobile_menu_bar {
top: 2px !important;
-webkit-transform: initial !important;
-ms-transform: initial !important;
transform: initial !important;
}
/* adjust width if fullwidth mode enabled */
.chi_dmm_styles.et_header_style_split #main-header #et-top-navigation {
width: 80%;
}
.chi_dmm_styles.et_header_style_centered .et_search_outer .et_search_form_container,
.chi_dmm_styles.et_header_style_split .et_search_outer .et_search_form_container {
background-color: #ffffff;
}
}
@media all and (max-width: 479px) {
.chi_dmm_styles.et_header_style_centered #main-header .container.et_menu_container {
position: relative !important;
}
}Wrapping Up
That’s it, your Centered (and Centered Inline Logo) header now looks like the Default header on mobile, freeing up precious screen space. If you ever need to do it vice versa, check out the tutorial on converting the Default header to Centered header style.
Try it out and let me know how it works in the comments section below.
Any update on getting this code to work with a global header?
Hi Ryan.
Thanks for your question. Do you mean implementing this for the header created using Divi Menu module?
Yes, it was built under Divi > Theme Builder > Global Header w/ a Menu Module.
You can achieve a similar result for the Centered and Inline Centered Logo styles of the Menu Module header using this CSS:
@media all and (max-width: 980px){.et_pb_menu--style-centered .et_pb_menu_inner_container,
.et_pb_menu--style-inline_centered_logo .et_pb_menu_inner_container {
display: flex;
}
.et_pb_menu--style-centered .et_pb_menu__logo-wrap,
.et_pb_menu--style-inline_centered_logo .et_pb_menu__logo-wrap {
justify-content: center;
}
.et_pb_menu--style-centered .et_pb_menu__wrap,
.et_pb_menu--style-inline_centered_logo .et_pb_menu__wrap {
justify-content: right;
}
.et_pb_menu--style-inline_centered_logo .et_pb_menu_inner_container > .et_pb_menu__logo-wrap {
margin-bottom: 0;
}
}
Hope this helps.
That works great, very helpful! Where would I add some padding to the left of the logo and right of the hamburger menu? Thank you!!!
Use the spacing settings of the Menu module.
Thank you for this, I’ve been looking for this solution for so long! For me it works as long as I’m in the Visual Builder mode. However, once I view the Page without having Visual Builder enabled, it does not work as expected. My logo also vanishes and as well as the design settings (not custom css) of my first text module is also not working anymore.
Are there any tips or updates for this? Thanks!
Hi Loyz.
It’s difficult to say why this issue would be happening without inspecting the page. However, it could be due to either the CSS being added improperly to the website which breaks the rest of the CSS (for example, you could have missed a closing curly brace “}” somewhere, etc.). or this is a caching issue, try clearing cache or disabling it completely while you are testing the CSS from this tutorial. And I don’t know how this CSS could be affecting the Text module styling, it has nothing to do with the Text module CSS, so, there must be some other reason for the issue.
Hi Ivan, thanks for your reply. I managed to correct the text module. But I still have the problem that when I use your CSS as custom CSS for the menu module in my global header, I can see it working perfectly in Visual Builder Mode. But once I exit Visual Builder Mode, the menu appears without any design applied. Even the font settings, logo, etc I had before are not working anymore. I use Divi 4.23.1 and developing my website locally at the moment. Can you confirm that the your CSS is working with this Divi version or the latest one? Do you have any other ideas? Thanks again!
Hi Loyz. Yes, I’ve tested this CSS again and can confirm that it works. BTW, as it is mentioned in the tutorial, this CSS works with Divi theme’s Centered and Centered Inline Logo header styles (that you can select in the Theme Customizer), you can’t use it as it is for the Menu module, you will need to adjust the selectors accordingly.
However, even if you are applying it to the Menu module it still shouldn’t be causing the issues you are mentioning. You can use the browser dev tools to inspect the header CSS and see if there is any other CSS (either custom CSS or some other plugin’s CSS) that is conflicting. Again, it’s difficult to say what could be the reason for the issue without inspecting the header.
Hi Ivan, I have another question :) how can I change your given CSS to keep the logo in the center (instead of left) and the mobile menu on the right?
@media all and (max-width: 980px){.et_pb_menu--style-centered .et_pb_menu_inner_container,
.et_pb_menu--style-inline_centered_logo .et_pb_menu_inner_container {
display: flex;
}
.et_pb_menu--style-centered .et_pb_menu__logo-wrap,
.et_pb_menu--style-inline_centered_logo .et_pb_menu__logo-wrap {
justify-content: center;
}
.et_pb_menu--style-centered .et_pb_menu__wrap,
.et_pb_menu--style-inline_centered_logo .et_pb_menu__wrap {
justify-content: right;
}
.et_pb_menu--style-inline_centered_logo .et_pb_menu_inner_container > .et_pb_menu__logo-wrap {
margin-bottom: 0;
}
}
Hi Loyz.
Thanks for your question. You can check out this tutorial, it’s for the native header of Divi theme but is a good starting point for implementing the same for the Menu module menus too (you probably need the snippet #2 Left Cart&Search – Centered Logo – Right Menu). Hope this helps.
BTW, this is really easy to do with Divi MadMenu, you can set the order of the header elements just in a few clicks in the MadMenu module settings, and you can arrange the header elements differently for each device (desktop, tablet and phone) without any custom CSS. FYI :)
Hi Ivan, thanks for you confirmation. I now figured it out. I used the CSS from the comment above and applied it in the custom CSS of the theme customer area. now it works :)
This is wonderful, thanks so much for sharing! I’ve been trying for ages to find a way to do this.
A question though: is it possible to add multiple dropdowns within the menu? I want to have the hamburger menu on mobile and each tab can drop down to reveal what’s in it the second layer (subtabs) and third layers.. So under ‘yoga & pilates’ would be ‘class timetable, our classes, yoga, pilates, private sessions’ listed. And as a third layer, under ‘private sessions’, I could list ‘about, private instructors’. Does this make sense? How would I achieve this?
Hi Alissa! You are welcome, I’m glad it helped :).
With regards to your question: as far as I understand, you want to make the mobile menu submenus collapsable. You can try this tutorial(have a look at the Solution 2): How To Collapse Divi Menu Module Submenus And Keep Parent Links Clickable On Mobile.
The code provided works for the headers created using Divi Menu module but can be adjusted to work with the native header of Divi theme too, you will just need to adjust selectors so that it targets the native header mobile menu elements.
Hope this helps.
Hello,
do you have found a solution for the Divi 4.0 Theme Builder ?
It would be very nice if you have it for us – many thanks
Unfortunately, it doesn’t work on Divi 4.0. Could you upgrade? :)
This CSS works with the native header of Divi including Divi v4.0+ . However, it does not work with Theme Builder headers because they’re created using the Menu Module. Updating this tutorial for Menu Module is on my to-do list.
Great tutorial, is there any way to add a generic “cart icon” next to the hamburger menu that when clicks it directs to url (example: click cart icon and goes to url example.com/cart)? I understand i may have to create or find an image to display but using your coding i cant figure how to add this. If you could help that would be greatfully appreciated!
Additional help
I just noticed my now static mobile menu will not allow me to do a full scroll. Meaning i can only see a certain number of pages and i need to see all of my pages on the menu. Please advise. Also i would like to reduce the thickness of the menu spacing, its too thick?
You can set the dropdown menu
max-heightinvhunits so that it does not get cut at the bottom of the screen and make it scrollable using this CSS snippet:#mobile_menu {overflow-y: auto;
max-height: 80vh;
}
Wow! Thank you
Definitely subscribing. Is there a way to make my mobile menu not as thick, less space on top and bottom?
Nbconcrete.com
Thanks Brian.
Add this CSS inside the
@media all and (max-width: 980px)query:.et_header_style_split #main-header {padding: 4px 0;
}
.et_header_style_split .mobile_menu_bar {
top: 8px;
}
This will make the header bar a bit thinner.
Does all this go in the css? The “query” is confusing me
Thank you. Also I am not receiving an email saying you replied (fyi).
Can you please show exactly how this will look i keep adding it wrong. Sorry for lack of knowledge.
Here it is :
@media all and (max-width: 980px){
/* set max-height for dropdown menu and make it scrollable */
.et_header_style_split #mobile_menu {
overflow-y: auto;
max-height: 80vh;
}
/* adjust header top and bottom padding */
.et_header_style_split #main-header {
padding: 4px 0;
}
/* adjust hamburger menu vertical positioning */
.et_header_style_split .mobile_menu_bar {
top: 8px;
}
}
Add this CSS into the Theme Options-> Custom CSS and don’t forget to clear cache.
Hello Ivan i thank you for this tutorial was what i was looking for, listen i would have a problem when i press on the hamburger menu a black underline appears on the left above the logo, this happens every time i open and close the menu what can it be? I tried to look a bit but I didn’t solve the problem, I await your reply
Hi Alessandro,
it’s hard to tell what could be the reason for that without checking the website, it could be a conflict with a plugin or a custom code, try to troubleshoot it with browser dev tools and maybe deactivate plugins temporarily to check if any of them is causing this issue.
Hey,
Great piece of code! I’ve tried it and think it’s absolutely amazing.
Is there anyway to move to logo back to the central position without affecting the code too much?
Hi Ricky.
add this CSS to center the logo:
.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.et_header_style_centered header#main-header .logo_container {
text-align: center;
}
it works for both Centered and Centered Inline Logo header formats.
Thank you for this fantastic tutorial. When I added this extra snippet above to centre the logo on mobile, it caused the logo to align left on desktop – any idea why this might have happened?
You should add the CSS snippet inside
@mediaquery like this:@media all and (max-width: 980px){
CSS snippet here...
}
this will prevent it from affecting the desktop menu.
Hello! This is exactly what I was looking for– thank you! When I open my menu, however, the dropdown menu appears to float below the header by a few pixels. Messing with the margins pulled it up closer, but also caused the hamburger menu to float higher up, un-aligning it with the logo.
Any suggestions?
Hi Julia,
you probably need to adjust the
topoffset of dropdown menu (hope I understood your issue correctly), try this CSS:.et_mobile_menu {
top: 80px; /* adjust top offset here */
}
Hope this helps.
Yes, thank you!
Hi, thank you for your tips, very usefull!
On my site I’ve a big margin on top, i set it to 0px..i use different logo for mobile and desktop but with both logo i’ve this issue…could you help me? thanks!
Hi Riccardo,
the issue happens due to the size of your logo, try setting a smaller
max-heightfor your logo (for example,32pxor smaller).Thank you so much. This is great. Until now its been working perfectly, but suddenly when I scroll up the logo is now disappearing instead of shrinking but staying in the menu like in the past. Any ideas?
Hi Greg,
it’s difficult to say why this would happen without inspecting your site. I have just tested this CSS again with the latest version of Divi (currently it is 3.17.6 ) both for the Centered and Centered Inline Logo header formats and didn’t notice any issues, it just works. In your case the issue might be caused by some other custom CSS applied to the mobile header, check if you’ve applied any.
Hi!
Thanks for this beautiful code, I do have a question though. When I scroll down on web, my logo turns black. So now in mobile it basically dissapears. Beforehand it would stay white, but now after I’ve imported code I scroll down and only the lines are visible. Any way to keep the logo static and still on the left side with this code? Also, space appears between the top and the dropdwon menu for some strange reason (in mobile). Thank you!
Hi Patricija,
your logo turns black because you have applied a custom CSS which is setting a black logo for the fixed header when you scroll down, it is not related to the CSS from this tutorial.
To remove the gap between header bar and dropdown menu just decrease the dropdown menu top offset, try this CSS:
.et_header_style_split #main-header .et_mobile_menu {
top: 45px;
}
Hope this helps.
Hi Ivan,
This tutorial was a total lifesaver! Thank you so much! Everything is working well, but I’m unable to find a way to reduce the overall height of the fixed mobile menu. I’ve tried using some different CSS solutions and nothing seems to be working.
Hi Garrett,
do you mean the height of the header bar(containing the logo and the menu hamburger) or the dropdown menu height?
Hello,
great tutorial. Thank you very much. Now, however, the Hamburg menu is half covered by the secondary menu. How can I move it down a bit?
Many greetings,
Marc
Hi Marc,
it doesn’t happen for me, do you have any other custom CSS or JS applied to your header? Looks like something is altering the top offset of the header making the secondary menu overlap it.
Hello Ivan,
A smashing piece of code and have managed to customize to near perfection. I wish I had found this a few projects ago when I needed something like this.
One question I don’t see anybody asking and can’t figure out:
Is there a way to make the dropdown menu go full-width? (So it covers whatever it drops down against) I see it resizes in the width, but I can’t figure it out in the CSS how you are doing it.
Any ideas anybody has would be great!
Thanks again for this awesome and super customizable code.
Hi Matt,
for Default header try this:
@media all and (max-width: 980px) {
.container.et_menu_container {
position: initial;
}
}
If you need more advanced customizations for Divi mobile menu then consider checking out the Divi Mobile Menu Customizer plugin, it provides lots of additional functionality for Divi mobile menu including the ability to build your mobile menu using Divi Builder layouts/modules from Divi Library.
Hi Ivan!
Great stuff! Thanks so much! Quick question — I’m working with a centered header/nav on a boxed layout. For Mobile I’d like to use a slide-in style menu. I’d also like to change logo on mobile. This post is the closest I’ve found to doing that. Any tips?
Thanks!
Hi Ivan
This is great! Exactly what I need thank you. I have copied your code and added to the custom.css and it works apart from the logo doesn’t show at all. Do you know why that might be?
Also, is there a way the header could be fixed?
The website is currently in development. I can give you a login to view it.
Thank you
Hi Aaron.
Inspect your header using browser Dev Tools to find out why the logo does not show, it must be a conflict.
To make the header fixed on mobile try this CSS:
@media all and (max-width: 980px){#main-header, #top-header {
position: fixed !important;
}
}
You can also contact me here.
Hi,
I am using the divi builder and currently have my logo central with my menu also central alligned.
I want to keep that exactly the same, but for my tablet and mobile menus i want it to look exaclty how you have it layed out above. I put in the code layout out above and it worked perfectly for my tablet and mobile but completely changed my desktop.
Please help :)
Thanks,
Charlie
Hi Charlie.
Make sure you copy the whole CSS including the
@mediaquery as well:@media all and (max-width: 980px) {
/* CSS here */
}
Hi Ivan- great tutorial! It all works as expected if my phone is landscape but in portrait mode the logo jumps out of the header as soon as I start scrolling. I have added some CSS to fix the nav bar- is there a conflict maybe?
Here’s the other CSS I’m using:
/**fixed mobile menu**/
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed;
}
}
/**scroll dropdown menu instead of page**/
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
Hi Gareth.
No, your custom CSS does not cause this issue. Add this snippet to change the fixed header logo container
heighttoauto:.et_header_style_centered header#main-header.et-fixed-header .logo_container {height: auto;
}
EDIT:
And maybe also change the logo container
max-widthto 80% to fix the header height issue on smaller screens. Find this snippet in the CSS provided and change themax-width:/* set max width for logo container and bring it above the navigation bar to make it clickable */.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
position:relative;
z-index: 2;
max-width: 50%; /* change this to 80% */
}
Worked a treat. Thank you!
Hi Ivan, I also had this problem and now is sortet, but from dekstop now when I scroll down the logo become bigger rather then smaller. Can you help me?
Hi Alessandro,
you probably need to decrease the Fixed Menu height in Theme Customizer->Header&Navigation->Fixed Navigation Settings
Dude! Works like a charm now. This is now THE BEST tutorial to get this done out there. More people should be doing this too, I think. Almost seems like Divi should default to this style on mobile anyway.
Thanks, Larry! :)
I actually spoke too soon. Z-index doesn’t seem to fix it for me. Any other work arounds? I’m trying to modify the size of the menu container, because even though it’s been made transparent it still sorta overlaps the logo quite a bit. Thoughts?
It actually fixes the issue, you just need to clear the cache. I have tested it several times and it works just fine.
Well, looks like I spoke too soon too :), the fix worked only when the MMC plugin was activated. I should have added this snippet instead:
.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
position:relative;
z-index: 2;
}
Updated the main CSS too.
Great tutorial! However when I implement this my logo on mobile is no longer clickable and linking to the homepage. All that happens is my menu opens. Any idea how to fix?
Hi Larry.
You are right, the logo was not clickable and the reason was that the navigation bar was covering it. I’ve set a
z-indexvalue to the logo so that it stays on top of the navigation bar:.et_header_style_centered header#main-header .logo_container a,
.et_header_style_split header#main-header .logo_container a {
z-index: 1;
}
Thanks for pointing that out, now logo is clickable.
Awesome! Glad to see you’ve added to the overall snippet too.
Thank you & great work! Ive been looking for a way to center align the mobile menu. On my site the logo is centered but the hamburger menu bar is to the far right. Please any tips if you could. Thanks in advanced
Hi Marcus, thanks for your comment.
This CSS should do the trick:
@media (max-width: 980px){.et_header_style_centered .mobile_menu_bar {
right: 0;
left: 0;
text-align: center;
}
}
Thank you & much appreciated. Keep up the great work!
Hi, thanks for all your help so far,
I’m using the default header but would like it centred for mobile devices.
Can you please advise how t odo this?
Thanks in advance, Rodoljub
Hi Rodoljub. Thanks for your comment.
Yes, we can do that too, I decided to answer to your question with a tutorial(I’ve just published it), check it out: Turn Divi Default Header Into Centered Header On Mobile Screens.
Hope this helps.
If i want to use mobile menu in ipad vertical and horizantell how im gone do???
Hi Johan.
It is somewhat complicated and depends on which header format you’re using. Start with this CSS snippet:
@media all and (min-width: 981px) and (max-width: 1366px) {
#top-menu {
display: none;
}
#et_mobile_nav_menu {
display: block;
}
}
It hides desktop menu and shows mobile menu for screens under 1366px width but this may not be enough if e.g. you are using vertical menu or Centered Inline Logo header.
Hi Ivan,
This is awesome! Thank you so much.
I just have a quick question. I’m using Mobile Menu Customizer for Divi & Divi Booster.
In the customization settings, if I set “Make Menu Fullwidth”, then the menu button disappears on a mobile unless I turn the mobile landscape. Is there any way of preventing this? I would prefer to have the menu fullwidth.
Also, by any chance do you have any tips to at any further customisation to the menu if it’s mobile? I would love to put some buttons on the bottom of the menu.
Thanks so much!
Hi Ajay. Thank you for your comment.
Disappearing menu button may occur due to a conflict with another plugin or custom code. Please contact me via support email and I’ll be glad look into this issue for you.
Regarding the buttons on the bottom of mobile menu – if you mean adding a CTA button to mobile menu then that is not that difficult if you are comfortable with CSS, you just add a CSS class to the menu item that you want to turn into a CTA button and then apply some custom CSS to style it the way you want.
Hope this helps.
Wonderful snippet, it worked like a charm! Only problem is, now that the logo is left justified, it is directly underneath the shopping cart button. Is there any way you can revise this to keep the logo centered?
Hi Rachel. Thank you for your comment.
To keep logo centered find and replace this CSS snippet:
/* set max width for logo container */
.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
max-width: 50%;
}
with this CSS snippet:
/* set max width for logo container */
.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
max-width: 100%;
width: 100%;
text-align: center;
}
Hope this helps.
hi
I seem to be having trouble with it, it comes out wring when i do it…
Hi adrian.
Make sure you do it exactly the way it is explained in the tutorial and then clear cache. If you’ll still have an issue share your site url, I’ll take a look.
Hi Ivan
I have done it but it becomes un responsive on a mobile device!
thanks
Does it become non-responsive only after you add the CSS from this tutorial? Looks like there is a conflict with some other code/plugin. Please check if there is any other custom code (CSS or JS) applied to the mobile menu and remove it and also deactivate plugins and then try again.
Thanks so much for the quick fix! You rock!
Ivan,
Thanks. Great code. This looks perfect on my client’s site.
Are you available for occasional freelance work? I couldn’t find an email for you.
Please get in touch with me when you get a chance.
Thanks for this! Like Karmen I just bookmarked it. Cheers!
Thanks Rambo, I appreciate that :)
This is a great tutorial! Bookmarking this I’ll need this on a template site I’m working on!!!
Hi Karmen, thanks for your comment. Good to hear that you like this tutorial :)