How to Replace the Primary Menu Bar with Divi’s Fullwidth Menu Module

hey divination thank you for joining us in this on live stream and today I will show you how to replace the primary menu bar with Divis full with module menu modules so this is part of the Divi design initiative and I'm going to use the carpenter and layout packs if you haven't checked that out yet make sure that you - I've mentioned a link in the description below and if you're not elegant themes member yet make sure that you check out TV I've mentioned a link to the product page where you can go ahead and discover Divi for yourself and without any further ado let's get into it alright so let's take a look at the carpenter layout back so this is the overall look and feel that you can expect from it and what we're going to do within this Elysium tutorial is get rid of this primary menu bar here at the top and replace it with Divis full width menu module and we're going to place that right below the hero section over here so the first thing you will need to do is go to your WordPress dashboard and go to your theme options so your Divi theme options by going to Divi theme options over here and we'll need to disable the fixed navigation bar so by default this is enabled and to be able to pull it off will need to disable this so the full width menu module will be fixed on our pages there will not be any fixed navigation or anything but you are free to place it wherever you want on your page so that's a big advantage and you can style it using Divis building options as well so once you disable this option over here go ahead and save your changes all right and the next thing you will need to do if you have not done that already is create your menu by going to appearance menus and over here you know at all of the carpenter' a layout pack pages to your menu and make sure that you enable this primary menu option over here and save your menu so I have already done that but you can go ahead and do that as well and the next thing we're going to do is we're going to style the menu in the theme customizer and I'll just go to the website over here and go to theme customizer and although we're going to get rid of it and use the module instead you can always leave this primary menu bar on specific pages or posts or whatever so you can decide for yourself where you want to get rid of it and replace it with the full-width menu module so for these reasons you will need to start your primary menu bar anyways even if you're not going to use it on certain pages just so it shows up correctly and matches with the layout pack that you are using or any other website that you're building even if you're not using the layout pack you'll definitely need to style that if you want it to appear on your posts and stuff like that so I'm going to the primary menu bar over here and I'm going to make some modifications that match the layout pack so as you can see this is the overall look and feel of it and the first thing I'm going to do is I'm going to make my text bold and uppercase as well I'm also going to change the colors so I'll use a white text color over here and I'll do the same for the active link and I'm going to use this orange orange background color but you can go ahead and decide that for yourself however you want to make your website look and feel so you can modify these according to your own needs and drop down menu background color as well so then I'm just going to publish it and exit the theme customizer okay so there are two ways to hide the primary menu bar as I've mentioned before you can hide it on a specific page or you can hide it on your entire website and I'll just start off by showing you how to hide it on one page in particular say for instance you want to hide it on the home page you simply go to your home page and enable the visual builder over here at the top and then you will need to open your page settings and to do that you will need to click on the icon located at the bottom of your page and over here you can see this Settings icon and if you click on it you will be able to add some CSS code that applies to the entire page by going to the Advanced tab over here going to custom CSS settings over here and just paste the following CSS codes so I've mentioned this CSS code in the blog post and you can find a blog post in the description below so go ahead and you know get the code or you can just read it on the screen it's just one line of CSS code and what it does it just basically disables the primary menu bar from showing up so it's actually still there but on this particular pages it's just not showing up and once you do so make sure that you save your paints and exit that visual builder afterwards because I'm going to show you if you want to you know disable the primary menu bar and not actually disable but just like hide it you can do that to your entire page by going to your WordPress dashboard over here and going to the theme options of Divi again in scroll down and over here in the custom CSS box if you if you add the CSS code it will be applied to all of the pages and you know all of the posts to your entire website actually so if you do want to you know make this count on your pages only and not your post and all of that you will need to add these to each one of the pages individual so the next thing I'm going to do is add the full width menu bar to my page wherever I want to so I'll just do that to the home page first and for that I'm going to enable the visual builder again alright so as you can see there is no primary menu bar and the first thing you will need to do over here is add a new section right below your hero section and this is not just the standard section you won't need a full width section because the module is only part of this particular section and before adding any modules go ahead and open the settings of your full width section and the first thing you will need to add over here is a top border so go to your border settings go to the top border and I'm going to add a border of seven pixels I'm going to use this color for it so it's the same orange color that was used to out the entire layout bag and now we can add the full width menu so over here just click on this icon over here and add the full width menu and if you've added the primary menu to your to your website you will find it in this list over here so as you can see all of these menu items show up and I'm going to add a black background color to my to my module and then I'll go to the design tab open the links settings over here and I'm going to change these colors so I'm going to use a white active link color a white drop down menu text color a white mobile menu text color and I'm going to use left text orientation and a light text color so all of my menu items show up and then I'll open the drop-down menu settings over here as well and I'm going to select black for each one of these so you know once there's a menu item that has some drop-down menu items to it it will still be readable and the background will be black and then I'll open the menu text settings over here as well and I'm going to modify this to make it match with the carpenter layout back so I'll use ultra bolt over here and I'm also going to enable uppercase so this looks really matching with my page as you can see and you can reuse this on your other pages as well so you will need to add this manually to each one of the pages but you can make this a global menu a global yeah module so that every time or section rather so that every time you make a change to it on one of the pages it will apply to all of the pages at the same time so go ahead and save this to your library and make it a global item okay so now it's a global item and I'm just going to add it to some other pages as well so I'm going to save my page and then exit the visual Builder and add this to my other pages as well you know it just asks it asks for a little bit of time a little bit of manual work but once you have the main thing going on you can easily add these in just a few clicks I'll just enable the visual builder on the landing page and over here click on the plus icon add from a library and add it to this page as well so you can go ahead and do this for each one of the pages on your website and you can actually play around with all of the settings that are included within this section or then this module so I'll just show you for instance what you can do with it something else you can also you know for instance I'm going to remove the border over here and I'll just add the section dividers so I'll just search for one so I'm just going to add a top and bottom section divider so you can choose for yourself how you want it to look like and then I'll also increase the spacing over here so these are the kind of things you can do with it or for instance you can add the dividers to your previous section and next section so I'll just get rid of this border once again open the section settings over here it's a little hard for me to open the settings because of the padding between the row and the sections so I'll just switch over to a wireframe mode open these settings over here and switch back so I do that quite often um just to speed things up I likes to switch between wireframe mode and the visual builder so I'm just going to add it to the bottom over here I'll just make it black and I can do the same thing over here so this is um I'm working on the section right below the full width menu module section and I'll add a top divider here as well divider color is black and as you can see you can create a really customized results and because of the fact that I've saved this as a global module this should apply to the home page right away as well I'll just show you really quick oh yeah I added the dividers to the previous and next section so if you want to make that apply to to all of the pages you will need to do it manually or you can add the section dividers as as I've shown you in the in the first try out to the section in particular and play around with these settings but you know the other side of this is that you can you know make the menu look differently on different pages that's that's the nice thing to have as well so let me just show you what it looks like on different screen sizes as well so I'll just enable the visual builder once again on the home page I'm just for you to see that it looks really good on all screen sizes so this is the tablet mode and this is what you can expect on phone all right that was all for this livestream if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing TV design initiative where we try to put something extra into your design toolbox each and every week do you want to contribute to the elegant themes vlog and share your knowledge skills and experience with the Divi community make sure that you check out one of the links in the description below and find out how you can do that thank you for watching and we look forward to seeing you in our next video or a live stream

Channel: Elegant Themes

Views: 64,798

Keywords:

Id: 716IOn8mUCg

Length: 14min 42sec (882 seconds)

Published: Tue Aug 28 2018