3.4 Styling the Mega Menu

Hello, and welcome back to this Tuts Plus course on WooCommerce. In this part of the course, we're going to amend the styling for the mega menu. Because the mega menu plugin has overridden the default styling in our theme, and we want to change some of it back. Now the mega menu plugin offers you a Settings screen that you can see here. So in Appearance there's a Max Mega Menu option, and there are some settings here. It uses the Menu Themes screen to give you the option to change a lot of the styling in the mega menu, which is what we're going to do. But first let's work out what we need to change. Let's take a look at how it's looking now. Now the first thing that's wrong here is this blank background here. So, we'll need to change that. So in my Mega Menu settings screen, I need to look for the color of the menu background, which is here. Now all I need to do is make that transparent, and what that means is that the styling that I added in my theme will be visible throughout this transparent menu item. Now let's save that and check it out. Scroll right down and click on Save Changes, and then I'll go to my store and refresh. So here we are. We haven't got a black background anymore, and if you hover over an item, the black background is still there. I need to change that. So I'll go back into my Mega Menu and I'll find the item for the hover. So, here we have menu item background on hover. Now, what I need to do is find out what the color was that I was using in my theme for hover menu items, and I can get that from my stylesheet. So here's my stylesheet for the theme, and the color I'm using here, as shown in my color section of my stylesheet, is this duck egg blue. So I copy that, go back into the settings here. Click on here. Paste that in and it's converted to an RGB reference. And then I scroll right down and click on Save Changes. Now if I go back to my store, refresh the screen, and hover over my menu, you can see that that's working as it should be. There's still an issue with the font size and the margins however. So let's move on to correcting the font size. I go back into the settings here Scroll down until I find the font size, and here I'll change that to 16 pixels, which is consistent with my theme. Scroll right down and click Save Changes, and then go back to my store. Refresh again, and here we are, the font size is right. That's looking better, but I've still got a problem with the margins and padding. Now let's check out what that should be by looking at the style sheet. Here's my style sheet. I scroll up to see the layout for my menu. Here's my menu. Each link here has got a line height of three m's which translates as 48 pixels. So, let's see if we can change that in the mega menu settings. Scroll down to Text and you can see it here, Menu Item Height is currently set at 40 pixels, and it should be 48. Scroll down, click on Save Changes. Go back to my screen and refresh. That's looking better, but it's still not quite right. Now what I want to do is remove any padding that's at the bottom here that's creating this extra line underneath, because my text isn't centered anymore. So let's work out what's causing that. I'm gonna inspect the element from nav menu, and you can see that my navigation is enclose in a div with the nav wrapper class and that's what adds the background. So that's all working okay, but within that, there is a nav element, with the class menu main. And here, there's a margin at the bottom, and that's been added via my style sheet. So I'm going to remove that, and here it is. In the section of my style sheet that deals with the menu, this is menu main margin bottom styling. So I'll delete that and save and then I'll go back to my site and refresh and low and behold, that's all working okay. Now, the next thing we want to do is style this image that we've added here. There isn't an option to override the styling here in the Max Mega Menu setting screen. So let's take a look at the HTML that's being output here, and the styling that's applied to it. This is a list item, like all of the other list items in that mega menu the difference with this one is it has this mega menu clear class which these ones don't have. Now widgets have that clear which is used for styling and layout, so let's take a look and see where that's happening. Here you've got a clear left. So what I'm gonna do is copy that into my style sheet and add an extra cast to it to reflect the fact that this is a text widget. So you can see the widget text class here. So let's copy this first. Go into the style sheet, and here's the section for the menu that we've been working in. I'll add a comment here. Copy that in. And to this final list item here, I'll also add the text widget class. And then I'll add an override for that clear. Save my style sheet. Go back to my site and refresh, and then when I hover over clothing, there's my image on the right hand side. So now you've seen how to add a mega menu with links to the products and the categories in your site, including attributes, and also how to add images and text to it. There's nothing to stop you from using anything that can be provided in a widget and adding it to your mega menu. In the next part of this course we'll move on from mega menus and start working on adding a filter menu. I'll show you some real world examples of filter menus and demonstrate how they can really help your users find the products they need. See you next time and thanks for watching!