Navigation menus are as essential part of a web site design as some other. As a substitute of simply throwing one right into a web site with out bearing in mind what shape it will take, designers must rightly make the effort to believe the design of navigation menus, the distance they soak up at the web page, and the way customers engage with them.

Widespread for a while now, is the sticky menu. Sticky menus keep on the height of the browser window when the consumer scrolls down. This manner, alternatively a long way the consumer strikes down the web page, the menu will nonetheless be out there, making it more straightforward for other people to navigate across the web site.

When to Use Sticky Menus

Sticky menus don’t seem to be at all times superb. They are easiest used on small, one-line menus that sit down on the height of the web page and haven’t any submenus.

Listed here are some examples of efficient sticky menus.

The Apple web site has a easy menu with out a drop-down components. It takes up little or no house on the height of the web page so is a perfect candidate for a sticky menu.

The Ted Baker web site additionally has a one-line menu which is sticky. On this case, the web site makes use of a mega menu so it expands while you hover over one of the crucial components.

However there are instances the place a sticky menu would not paintings. For instance, the Dad or mum web site has a big header with the menu beneath that. If the menu was once made sticky, it could imply that it and the header took up manner an excessive amount of of the display house.

The IBM web site includes a menu on the height of the display with drop-down components. This web site does not use a sticky menu, most certainly on account of the drop-downs, which do not at all times paintings smartly when added to a sticky menu.

The most efficient time to make use of a sticky menu is when your navigation menu is on the height of the display and is an easy, one-line menu. As you’ll see from the examples above, this will paintings with a mega menu, however you do want to deal with that with care. If the consumer by chance hovers over a sticky menu whilst scrolling down, and all at once the mega menu seems, it may not make for the most productive consumer enjoy.

Including a Sticky Menu to Your Theme: Getting Began

Now let us take a look at the code you wish to have to make use of to make your navigation menu sticky. 

You can want:

• A theme you’ll edit (see beneath).
• A construction set up of WordPress—do not do this in your reside web site!
• A code editor.
• Get entry to for your theme recordsdata.

I will be running on a theme I advanced myself. If you are the use of a third-party theme, you’ll want to create a kid theme and upload any edits to that. In case you edit the third-party theme itself, you’ll be able to lose your adjustments subsequent time you replace it.

The Beginning Code

Here is the web site I will be running on:

If I scroll down, the menu disappears:

I need to edit the CSS for the menu in order that it remains on the height of the web page when scrolled.

Right here’s the code that provides my menu to the web site, which is within the header.php report of my theme:

1

<div magnificence="header-bg">

2

3

        <header function="banner">

4

5

			<hgroup magnificence="site-name one-third left">

6

				<!-- web site call and outline - web site call is within a div part on all pages excluding the entrance web page and/or leading weblog web page, the place it's in a h1 part -->

7

				<h1 identification="site-title" magnificence="one-half-left">

8

					<?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') )  || is_page_template( 'page-tripwire.php' ) ) {

9

						bloginfo( 'call' );

10

					} 

11

					else { ?>

12

						<a href="<?php echo home_url( '/' ); ?>" identify="<?php echo esc_attr( get_bloginfo( 'call', 'show' ) ); ?>" rel="house"><?php bloginfo( 'call' ); ?></a>

13

					<?php } ?>

14

				</h1>

15

				<h2 identification="site-description"><?php bloginfo( 'description' ); ?></h2>

16

			</hgroup>

17

18

			<div magnificence="proper two-thirds">

19

				<!-- This house is through default within the height proper of the header. It incorporates touch main points and may be the place you could upload social media or RSS hyperlinks -->

20

21

				<?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ?>

22

					<a magnificence="toggle-nav" href="#">&#9776;</a>

23

				<?php } ?>

24

25

				<!-- navigation menu -->

26

				<?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ?>

27

					<nav magnificence="menu leading proper">

28

						<div magnificence="skip-link screen-reader-text"><a href="#content material" identify="<?php esc_attr_e( 'Skip to content material', 'compass' ); ?>"><?php _e( 'Skip to content material', 'twentyten' ); ?></a></div>

29

						<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'number one' ) ); ?>

30

					</nav><!-- .leading -->

31

	            <?php } ?>

32

33

			</div> <!-- .one-half proper -->

34

35

		</header><!-- header -->

36

37

	</div><!-- header-bg-->

This code incorporates plenty of components:

• the background to the navigation and header, which is full-width
• the header part itself, which has CSS for width
• the web site identify and outline
• the navigation menu

It makes use of CSS from my theme for structure, floats, and hues, such because the .proper and .left categories for floats.

Right here’s the CSS for the primary components of that header banner:

1

.header-bg {

2

    background: #21759B;

3

}

4

header {

5

    margin: 0 auto;

6

    width: 96%;

7

    max-width: 1200px;

8

    transparent: each;

9

    padding-bottom: 1em;

10

}

The weather which are floating subsequent to one another (the web site identify and outline and the menu) use CSS for floats and width that isn’t particular to those components:

1

.one-third.left {

2

    margin: 0 1% 0 0;

3

    drift: left;

4

}

5

.two-thirds.proper {

6

    margin: 0 0 0 1%;

7

    drift: proper;

8

}

Your styling might be other from this however will come with styling for backgrounds, widths, and floats in some shape. If you are growing a kid theme for a third-party theme, take a while to seem over the prevailing stylesheet so you already know what you might be concentrated on together with your kid theme CSS.

Making the Menu Sticky with Mounted Positioning

Now let’s upload the code to make our menu sticky. The part I need to goal is the .header-bg part, which incorporates the whole lot else.

For your theme, in finding the part that represents the menu background or the menu itself if it isn’t wrapped within anything. There might be a header part concerned someplace. This is the reason it can pay to make use of a construction set up of WordPress—you could want to experiment!

Whenever you’ve discovered the top-level part that should stick with the tip of the web page, upload this to it:

1

.header-bg {

2

    place: mounted;

3

    height: 0;

4

    width: 100%;

5

}

This does the task for solving the menu to the tip of the web page, or making it sticky:

On the other hand, there’s a drawback. The menu is overlapping the content material beneath it, on the height of the display. After I scroll down this isn’t obvious, but if I scroll as much as the tip of my display, the primary line of textual content is hidden.

It’s because the .mounted positioning for the menu has taken it out of the traditional float of the HTML because it’s rendered, that means that the browser renders no matter HTML comes subsequent on the height of the display.

Let’s repair it. To try this, we want to upload a margin to the tip of the following part, which is a div with the category of .leading. We additionally want to set a top for the sticky menu to make sure it’ll be equivalent to that margin.

To get this proper, I want to interrogate the CSS for the weather throughout the .header-bg part, so I will learn how the peak is being computed.

The .header-bg and the header components don’t have top set, and feature height and backside padding and margins of 0. If I drill down additional, I will in finding the padding for listing pieces throughout the menu:

1

#menu-navbar li {

2

    padding: 1em 5px;

3

    margin: 0;

4

}

The font dimension for the textual content is equal to for the frame part, so we will be able to take that as 1em. This provides us a complete top of the header bar at 3em.

Right here’s the adjusted CSS:

1

.header-bg {

2

    place: mounted;

3

    height: 0;

4

    width: 100%;

5

    top: 3em;

6

}

7

8

div.leading {

9

    margin-top: 3em;

10

}

Notice that I’ve overqualified div.leading as an alternative of the use of .leading. It’s because this theme additionally makes use of the .leading magnificence at the leading menu (nav.leading). Whether or not that is essential for you are going to rely at the manner your theme’s coded.

The menu now seems above the content material because it must:

And once I scroll down, the menu (and the remainder of the header) remains mounted in position:

In order that’s how you’re making your navigation menu sticky!

A Sticky Menu Can Toughen Consumer Revel in and Modernize Your Website

In case your web site has a easy menu on the height of the display, making it sticky the use of this system will make it more straightforward for customers to get right of entry to it and navigate round your web site, anyplace at the display they’re.

But when your menu may be very massive, or it is beneath header components that may soak up an excessive amount of house, a sticky menu would possibly soak up an excessive amount of house at the display and detract from consumer enjoy.

It is your name—however a sticky menu is more straightforward so as to add than you could suppose.