In this Monday Masterclass we look at the Navigation Menus (nav. menus), why we need them, and a list of the do’s and don’ts we should be considering when we design these valuable assets for our WordPress sites.
this week navigation menus are back on
the menu yes pun intended
why well because what was once a mundane
optional feature is now a crucial piece
of design that is vital to the success
of any website initially website menus
are a navigational tool to help users
find what they’re looking for on our
websites and it’s because of this basic
functionality because we know how users
rely heavily on this feature that both
web builders and search engines have
invested interest in how they work and
knowing this we can not only create
better user experience we can even use
this to our advantage to misquote John
Donne no site is an island we don’t
build sites in a vacuum we build sites
to draw traffic and the way to draw
traffic is by anticipating the behavior
of our target audience so when designing
web sites in general and menus
specifically we must remember that we
are targeting two equally important
types of audiences humans and BOTS now
these bots are known as spider BOTS or
web crawlers and their job is to roam
around the internet visiting sites
indexing the content that they find and
reporting back to search engines on the
levels of user experience and content
now it’s true bots are designed to mimic
human behavior when visiting sites in
order to save human visitors time by
gathering data that helps search engines
point to the sites that are most likely
to offer the best experience and the
most reliable information now having too
many options in a menu makes it
difficult for web crawlers to do their
job and systematically browse and index
everything that they find on our sites
and this is why ease of navigation is
one of the most valuable contributors to
this user experience and consequentially
vital to our SEO ranking boosting
traffic and perhaps even rewarding us
with Rich Snippets
so now that we understand the importance
of navigation menus let’s review the
primary styles of navigation menus on
WordPress websites and understand when
to use them and go over the important
do’s and don’ts while we’re at it now
it’s important to see these primary
Styles the same way that we think of
primary colors that they are just the
basic components or ingredients that we
can combine mix and match in so many
ways that eventually we create a vast
array of variety that part is up to us
you and me and we should let our
imagination run while to achieve this
for now we’ll just be reviewing the
primary styles and I always believe that
the best place to begin is with the
classics probably because I’m British
after all now a classic menu will
typically appear in the site’s header on
a one-page website it could appear as
part of the top section of the page
itself
we usually classify a nav menu as
classic when it’s static meaning that it
stays at the top of the page and that’s
the only place that we’re going to see
it and also because of its level of
simplicity
there’s nothing complex about the
classic nav menu layout or design we’ll
see category labels in the top level
each leading to drop-down or cascading
sub levels the main advantage of the
classic style menu is that users are
extremely familiar with them and
therefore it will make life very easy
for them and for our friendly
neighborhood spider BOTS making this a
great choice for marketplace websites or
websites with lots of categories of
information one downside to the classic
nav menu is the amount of information
that this style is usually synonymous
with and some users may find these menus
tedious perhaps overwhelming and prefer
to use the search option or even bounce
all together this is especially true of
a variation of the classic style
navigation menu the super-sized classic
menu commonly known as a mega menu to
prevent our menus from taking a turn for
the worse don’t have too many top-level
labels in your menu this
most likely overwhelm users and appear
too complex and avoid this by having
just a handful of categories that expand
to larger families
if you’re considering designing a mega
menu make sure that you have a large
enough number of categories and
subcategories to justify using this
style don’t make the font in your sub
level labels too big or too small a good
rule of thumb is to keep them the same
size as the body text or slightly larger
and make sure that your categories are
well labeled and organized and intuitive
create visual differences between
category labels and cascading sub levels
using contrasting colors and typography
the main downside to this style is that
it’s not mobile responsive whatever
style of menu we choose we must always
consider the mobile version of the site
in previous master classes we’ve spoken
about the importance of responsive
design especially now that Google has
shifted its preference and higher
ranking to mobile first sites these are
sites that are initially designed for
mobile and then adapted for desktop
rather than the other way around now
what most web building experts do to
solve this problem is create two types
of menu in element or and using the
responsive settings they hide the non
relevant menu in the responsive mode
this way I can create one website but
the classic menu will be hidden when
viewing the site on mobile a very
popular style of menu for responsive use
is hiding a collapsible menu behind a
menu icon fondly known as a hamburger
icon as users and designers we love this
style of nav menu it takes up an
absolute minimum screen space it doesn’t
dominate the page moreover it hides all
the clutter of categories when all we
want to do is focus on the content of
the page at least until the menu is
needed then it’s merely a matter of
clicking or tapping on the icon to
reveal a clear drop-down menu use
hamburger icon is a great way to go if
you’re designing a nav menu to contain
lots of category labels if you only have
two or three categories each leading to
minimal or no families maybe it’s not
the best idea to use this when
considering this style we need to
remember that we still need this little
icon to be easily noticeable so don’t
keep it tucked away make it easy for
users to locate and use and that means
that within this collapsible menu we
also need to make sure that there is a
clear indication of which segments
expand into subcategories this is
equally true of the exit button or close
icon we need to keep it noticeable so
users can exit or close the menu easily
so designers like to stylize their
hamburger icon and I’m sure you’ve seen
this as a hand-drawn icon or made up of
several colors and this is fine so long
as it’s recognizable as a menu icon
remember most users are not you and
their job isn’t to figure out the way
that we think unless of course we’re
designing a website for gamers then we
can practically hide everything I mean
the game was that I know can spend hours
clicking around a screen just searching
for stuff if we’re tasked with designing
a menu that is always visible no matter
where we are on the page then what we
need is a sticky menu
these are menus that seem to be stuck to
the screen floating above the page as it
Scrolls past and this makes them perfect
for long pages the user will always have
the navigation options right in front of
them instead of having to scroll back to
the top of the page which could be a
long way off now
turning a static menu bar into a sticky
is easy in Elementor it’s just a matter
of checking a box in the advanced
settings while these are a very popular
style of navigation menu for both
desktop and some mobile sites there are
some downsides too sticky menus most
obviously that a menu bar that travels
down the page will continuously conceal
a chunk of screen real estate some
designs solve this by placing the menu
in a section with low opacity or full
transparency unfortunately this solution
is not always perfect we must make sure
that we contrast the colors of the menu
bar with the colors of the page
otherwise our menu will disappear also
avoid creating opposite extremes by
using colors that clash again we don’t
want to draw too much attention away
from the page towards the menu itself
then again sometimes the goal of our
design is just that to steer the user to
the menu and if there’s one style that
has the best chance of upstaging the
rest of the page that style of nav menu
is the pop-up now many of you will
remember that we use this style in our
recently released travel agent template
kit a simple way to create these in
elements or is to place our navigation
menu widget in the pop-up and then we
add a button or icon on our page or in
the header and we use it to trigger the
pop-up by going into the button widget
settings and using the dynamic options
to set the buttons action to open pop-up
as you can see this is exactly the same
way that we do it closing the pop-up is
of course something that we define in
the pop-up settings this would be a good
time to mention that if you’re using
this style make sure that the close icon
or button is clear and easy to use
especially in responsive mode now all of
these styles of navigation menu can be
used both horizontally across the screen
top or bottom and vertically down the
side of the screen equally now there is
of course a debate among user experience
experts as to whether or not vertical or
side screen menus should be used those
in favor of them will point out that we
use them all the time we even have one
in WordPress those opposing side screen
menus make a point that they are
detrimental to mobile user experience
however there are some great uses of
pop-up menus that slide in from the side
in responsive mode unfortunately they
are also less fashionable these days
though they still appear in sites that
are designed to be viewed or scrolled
horizontally like some portfolio
websites
now our last style is one that at least
to my knowledge only appears
horizontally in either headers or
footers and this style is the two-tier
menu
these are menus that appear in two
usually contrasting tears rows or
sections so to separate two or more menu
widgets groups of categories let’s say
that we’re designing an online store we
could create a menu for clothing and
accessories by gender age occasion etc
and another one for our about FAQ pages
and so on we then build a header with
two sections and into each we drag a
navigation menu widget and assign one of
the menus to each widget you can achieve
the same result just as easily by using
only one menu in one tier and adding
button widgets or an icon list widget to
the second again there are those who
feel that this style of menu is
confusing to users but personally I find
that this style is very convenient in
fact if you’ve had a chance to check out
the template kit that we released last
week for online magazines you can see
exactly what I mean
this week we looked at navigation menus
why we need them how they can help bring
users to our sites as well as bettering
the user experience once they’re there
we also looked at five different
practical styles of navigation menu any
which could be combined to create
something that we’ve never seen before
more importantly we looked at the main
do’s and don’ts that we need to consider
when designing and building a navigation
menu all of which could probably be
summed up in one indisputable rule keep
it simple as always if you have any
advice tips or insight that could help
other users please share it in the
comments below and if you’d like to
share examples of sites that have
inspired you or that you’ve created this
is the place if you have any criticisms
we are equally interested in your
thoughts and this is because we consider
you the viewers and community members to
be a valid part of the journey that we
set out on with each Monday masterclass
and if you’ve enjoyed this masterclass
and you found it helpful or inspiring
the make sure that you click on the
subscribe button and tap that Bell so
that you don’t miss out on our next
Monday master class after all our goal
is to be the best helping others excel
at their craft thanks for watching
Cheers
