Navigation menus are as necessary part of a web site design as some other. As a substitute of simply throwing one right into a web site with out contemplating what type it’s going to take, designers ought to rightly take the time to think about the design of navigation menus, the house they take up on the web page, and the way customers work together with them.
Widespread for a while now, is the sticky menu. Sticky menus keep on the prime of the browser window when the consumer scrolls down. This fashion, nevertheless far the consumer strikes down the web page, the menu will nonetheless be accessible, making it simpler for individuals to navigate across the web site.
When to Use Sticky Menus
Sticky menus aren’t all the time best. They’re finest used on small, one-line menus that sit on the prime of the web page and don’t have any submenus.
Listed here are some examples of efficient sticky menus.
The Apple web site has a easy menu with no drop-down components. It takes up little or no house on the prime 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 location makes use of a mega menu so it expands once you hover over one of many components.
However there are circumstances the place a sticky menu would not work. For instance, the Guardian web site has a big header with the menu under that. If the menu was made sticky, it will imply that it and the header took up approach an excessive amount of of the display screen house.
The IBM web site contains a menu on the prime of the display screen with drop-down components. This web site would not use a sticky menu, in all probability due to the drop-downs, which do not all the time work properly when added to a sticky menu.
The very best time to make use of a sticky menu is when your navigation menu is on the prime of the display screen and is a straightforward, one-line menu. As you may see from the examples above, this will work with a mega menu, however you do have to deal with that with care. If the consumer by accident hovers over a sticky menu whereas scrolling down, and instantly the mega menu seems, it will not make for the very best consumer expertise.
Including a Sticky Menu to Your Theme: Getting Began
Now let’s take a look at the code it is advisable to use to make your navigation menu sticky.
You may want:
- A theme you may edit (see under).
- A improvement set up of WordPress—do not do this in your reside web site!
- A code editor.
- Entry to your theme recordsdata.
I’ll be engaged on a theme I developed myself. Should you’re utilizing a third-party theme, ensure you create a baby theme and add any edits to that. Should you edit the third-party theme itself, you may lose your adjustments subsequent time you replace it.
The Beginning Code
Here is the location I’ll be engaged on:
If I scroll down, the menu disappears:
I wish to edit the CSS for the menu in order that it stays on the prime of the web page when scrolled.
Right here’s the code that provides my menu to the location, which is within the header.php file of my theme:
1 | <div class="header-bg"> |
2 | |
3 | <header function="banner"> |
4 | |
5 | <hgroup class="site-name one-third left"> |
6 | <!-- web site title and outline - web site title is inside a div ingredient on all pages besides the entrance web page and/or predominant weblog web page, the place it's in a h1 ingredient -->
|
7 | <h1 id="site-title" class="one-half-left"> |
8 | <?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') ) || is_page_template( 'page-tripwire.php' ) ) |
9 | bloginfo( 'title' ); |
10 | |
11 | else ?> |
12 | <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'title', 'show' ) ); ?>" rel="dwelling"><?php bloginfo( 'title' ); ?></a> |
13 | <?php ?> |
14 | </h1>
|
15 | <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> |
16 | </hgroup>
|
17 | |
18 | <div class="proper two-thirds"> |
19 | <!-- This space is by default within the prime proper of the header. It accommodates contact particulars and can also be the place you may add social media or RSS hyperlinks -->
|
20 | |
21 | <?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) ?> |
22 | <a class="toggle-nav" href="#">☰</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 class="menu predominant proper"> |
28 | <div class="skip-link screen-reader-text"><a href="#content material" title="<?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' => 'major' ) ); ?> |
30 | </nav><!-- .predominant --> |
31 | <?php ?> |
32 | |
33 | </div> <!-- .one-half proper --> |
34 | |
35 | </header><!-- header --> |
36 | |
37 | </div><!-- header-bg--> |
This code accommodates numerous components:
- the background to the navigation and header, which is full-width
- the header ingredient itself, which has CSS for width
- the location title and outline
- the navigation menu
It makes use of CSS from my theme for format, floats, and colors, such because the .proper and .left courses 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 | clear: each; |
9 | padding-bottom: 1em; |
10 |
The weather which can be floating subsequent to one another (the location title and outline and the menu) use CSS for floats and width that is not particular to those components:
1 | .one-third.left
|
2 | margin: 0 1% 0 0; |
3 | float: left; |
4 | |
5 | .two-thirds.proper
|
6 | margin: 0 0 0 1%; |
7 | float: proper; |
8 |
Your styling will probably be totally different from this however will embrace styling for backgrounds, widths, and floats in some type. Should you’re creating a baby theme for a third-party theme, take a while to look over the present stylesheet so you understand what you are focusing on together with your little one theme CSS.
Making the Menu Sticky with Fastened Positioning
Now let’s add the code to make our menu sticky. The ingredient I wish to goal is the .header-bg ingredient, which accommodates every thing else.
In your theme, discover the ingredient that represents the menu background or the menu itself if it isn’t wrapped inside the rest. There might be a header ingredient concerned someplace. That is why it pays to make use of a improvement set up of WordPress—chances are you’ll have to experiment!
When you’ve discovered the top-level ingredient that should follow the highest of the web page, add this to it:
1 | .header-bg
|
2 | place: fastened; |
3 | prime: 0; |
4 | width: 100%; |
5 |
This does the job for fixing the menu to the highest of the web page, or making it sticky:
Nevertheless, there’s a downside. The menu is overlapping the content material under it, on the prime of the display screen. After I scroll down this isn’t obvious, however after I scroll as much as the highest of my display screen, the primary line of textual content is hidden.
It is because the .fastened positioning for the menu has taken it out of the traditional circulate of the HTML because it’s rendered, that means that the browser renders no matter HTML comes subsequent on the prime of the display screen.
Let’s repair it. To do that, we have to add a margin to the highest of the following ingredient, which is a div with the category of .predominant. We additionally have to set a top for the sticky menu to make sure it is going to be equal to that margin.
To get this proper, I have to interrogate the CSS for the weather contained in the .header-bg ingredient, so I can learn the way the peak is being computed.
The .header-bg and the header components don’t have top set, and have prime and backside padding and margins of zero. If I drill down additional, I can discover the padding for listing gadgets inside the menu:
1 | #menu-navbar li |
2 | padding: 1em 5px; |
3 | margin: 0; |
4 |
The font measurement for the textual content is identical as for the physique ingredient, so we will 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: fastened; |
3 | prime: 0; |
4 | width: 100%; |
5 | top: 3em; |
6 | |
7 | |
8 | div.predominant |
9 | margin-top: 3em; |
10 |
Notice that I’ve overqualified div.predominant as a substitute of utilizing .predominant. It is because this theme additionally makes use of the .predominant class on the primary menu (nav.predominant). Whether or not that is mandatory for you’ll depend upon the way in which your theme’s coded.
The menu now seems above the content material because it ought to:
And after I scroll down, the menu (and the remainder of the header) stays fastened in place:
In order that’s the way you make your navigation menu sticky!
A Sticky Menu Can Improve Consumer Expertise and Modernize Your Website
In case your web site has a easy menu on the prime of the display screen, making it sticky utilizing this system will make it simpler for customers to entry it and navigate round your web site, wherever on the display screen they’re.
But when your menu may be very massive, or it is under header components that may take up an excessive amount of house, a sticky menu might take up an excessive amount of house on the display screen and detract from consumer expertise.
It is your name—however a sticky menu is simpler so as to add than you may assume.
#Sticky #Menu #WordPress #Envato #Tuts