In this video, you will learn how to use Elementor’s Nav Menu widget to customize WordPress menus. Change colors of the menu items, create mobile menus, customize the submenu and other important points you should know about this highly customizable widget.
[Music]
in this video I’m going to show you how
to set up the nav menu widget so I have
the nav menu right here and the first
choice that I can see is the choice of
which menu to display so I’ll choose
this one and these are menus that are
created on WordPress and they are drawn
into this widget
next I can choose horizontal vertical
and drop-down I’ll show you examples of
the other layouts in a little while and
I can choose to align it to any side or
spread it throughout the column so let’s
align it to the right pointer this is
the mark that appears on hover and when
the item is active so this example shows
underline let’s show another example
which is framed and you can play around
with the different pointers each pointer
has a set of animations this is the fade
one and you can also choose a different
one like grow let’s stick to fade I also
have a submenu indicator this it’s lit
the little angle icon right here and I
can choose to show a plus and any of the
other submenu and indicators next we
have the mobile drop-down setting now if
I want the mobile menu to be displayed
on tablet devices and lower
I choose tablet and this way when I
switch to tablet I see the mobile menu
however if I choose mobile devices the
lower it means the tablet will still
show the regular desktop menu and only
if I go to the mobile view then I will
see the mobile menu so let’s switch back
to tablet and tablet breakpoint so now
when I open the menu it opens in the
same column but what if I want it to
show in the full width this is why I
have the full width option and when I
switch it on the menu items take
the whole screen and are on top of the
section below it if I close the menu it
is still situated in the right column
so for the menu I can choose the
alignment of the menu items either to
center or side and have the toggle
butter button either show the burger or
already display the menu items
I can also show the toggle alignment to
the left center or right next I want to
show you the styling options so I’ll
switch back to desktop view and go to
the style tab I can change the menu item
style for normal hover and active state
to understand what each state means I’ll
change the active state to green for the
text color and pointer color now you see
that the home button that I’m currently
on is green while the other links are
blue we can also set the typography
style and change the pointer width to
make the pointer here more wide and I
can change the horizontal padding and
this changes the width of the pointer
and to explain how it works if I reduce
this to zero and then increase the space
between the items I can see that the
pointer width it is exactly the same
width as the text I can also change the
vertical padding which affects the
distance between the pointer and the
text so if I reduce it you see that the
pointer is really close to the text next
we have the drop down menu now this menu
effects both the sub menu and the mobile
menu so to see it in action I’ll switch
to tablet view now I can change the
normal and hover state and change the
text color background color typography
add a border type and border radius set
a box shadow change the horizontal
padding which is the distance between
the text and the sides and vertical
padding affecting the height of the
whole menu I can set the divider right
now it’s dotted that you can set it to
solid change its color and border width
and for the whole menu change the
distance from the top and let’s switch
the toggle button to Berger and then we
can set the toggle button design for
both normal and hover I can change the
color the background color
to create this negative effect change
the size the border width and the border
radius here are some other examples of
the kind of menus you can create with
this widget for vertical menus I
recommend using either background or
text pointers because if I choose let’s
say underlined it doesn’t really look
quite as good this type of menu is very
popular for design and fashion related
sites next is an example of a drop-down
menu that is great for the minimalistic
view notice that for content and style
we only have the option for drop-down
and not for main menu this is because we
only set the drop-down menu here is
another example of the vertical menu now
this effect is easily done by setting
the size to a large size and choosing a
color with opacity and on content
setting the animation to grow and then
you get this nice semi-transparent
effect finally we have this horizontal
menu and I want to show you how you can
quickly change the effect by reducing
the vertical padding and increasing the
border radius I can quickly turn it into
sort of button menu I hope by now you
better understand how to use the nav
menu widget in Elementor for more
tutorials be sure to subscribe to this
YouTube channel until next time this is
Dan from
[Music]
