Thank you so much for watching the press
Avenue YouTube channel my name is John
and today we're gonna talk about how to
make a mega menu in beaver builder
without a plugin it's simply a CSS class
and we'll get in how to do it if any of
these videos are helpful please give it
a thumbs up and go ahead and hit that
red subscribe button and we'll get into
it so here we are on our site pres
Avenue comm where you can find WordPress
tutorials for everyone the last thing
I'll say is we have a new Facebook group
which is facebook.com slash group slash
press Avenue or we can have further
discussion about different tutorials
plugins and themes that you should be
using alright so let's get to it
we have a real estate site where we need
to add a mega menu currently they have a
pretty big menu that's dropping down
here and we want to spread it out wide
and you'll see what I mean in just a
minute so we already have the beaver
builder theme installed we're using the
child theme this one's using theme ER
and this one's using the beaver builder
plug-in so for different beaver builder
things you really need the theme and the
plug-in itself you do not need theme ur
to do this just so you know so we're
already logged in we have all that done
we're going to go ahead and go to the
top left and click on menus so this is
where you would add that class and we'll
show you just that so I'll let it load
and here we are in the menu area so the
first thing we need to do is go to the
correct menu so I'm going to go to main
menu if you have a different menu you
would select it up here if not this is
where we need to be next you need to hit
the arrow to drop down the details of
the menu item and if you look we have
URL and navigation label we actually
need to turn on a feature that allows us
to add a CSS class so what we're gonna
do is scroll back up and we're going to
go to screen options on the top right
and it says show advanced menu
properties we're going to turn on
classes and once we do you can see down
below that it pops open a box that says
CSS classes optional so in this home
area we don't want it so if I come back
to the home page
you'll see we really want to make a menu
on those larger menu items so under
search possibly
I'll show you under the about so the
class is mega - menu so under about here
I will type mega - menu and that's it
so all these sub menus of this about
page I don't have to do so I go back up
and hit save will let it load I'll
actually refresh the page now we only
did it to one menu item so if I go to
about now you see it spreads it out
across the board now to clean this up I
need to change some of these so they're
not as large but now these show titles
we can customize this further by adding
subtitle descriptions so let me show you
what I mean so I'll go to custom links
I'll do the URL as nothing and I'll do
the text as about us just to show you as
a reference oh this one's humongous so
scroll to the bottom and drag this back
up everyone gets to do this at some
point in time and I'm going to put this
one here and then I'm going to indent
this one so now we have the mega menu as
the top menu here the submenu is about
us which is really just a title and then
under that is another one now I'll hit
save and buy another one I mean an
actual link
so right now you see we just have the
titles across if i refresh it now has
that about us which which you can make a
link but I did it and it has a sub under
that but you see the styling that comes
automatically
so the first submenu has that bolded
styling and of course you can change
this but as the default and then
anything under that is a non bolded
regular text so something to consider
will change this on neighborhoods and
I'll show you one more example so clean
this up remove and then to get rid of it
you simply just get rid of this make a
menu option because you might not
necessarily want it on each one so under
neighborhoods here I have this main menu
item so if I go back here it says
neighborhoods that's the main item the
sub menu items are searched north
central East and it goes from there so I
could make this whole you'll to see how
it works the north will essentially be a
link showing all north properties for
this particular one or whatever your
website is about so let that refresh
that's what we have when we refresh and
go back
now we have neighborhoods north is now
showing each north area this happens to
be a real estate site the map we could
put a map here and that's another
tutorial but we could have north central
east south west on this left-hand side
as well at the top because people might
not actually realize that the titles are
clickable
so then we have central central is a
link you can see in the bottom left it
might be hard for you to see it just
brings into a central page these bring
them to particular areas and that's it
so that's how you do a make a menu in
beaver builder it's a very quick and
straightforward it doesn't require
another plugin just saying mega - menu
all lowercase in that classes option and
hitting save if you have any additional
questions about how to use beaver
builder how to build real estate themes
WordPress themes or anything else please
let me know in the comments below if
this was helpful give it a thumbs up and
lastly go ahead and hit that red
subscribe button to see more great
videos just like this thank you so much
for watching
