[ad_1]
Navigation menus are as essential part of a website online design as some other. As an alternative of simply throwing one right into a web site with out bearing in mind what shape it’s going to take, designers must rightly make an effort to believe the design of navigation menus, the distance they take in at the web page, and the way customers have interaction with them.
Standard for a while now, is the sticky menu. Sticky menus keep on the peak of the browser window when the consumer scrolls down. This manner, then again a long way the consumer strikes down the web page, the menu will nonetheless be out there, making it more straightforward for folks to navigate across the web site.
When to Use Sticky Menus
Sticky menus don’t seem to be all the time excellent. They are very best used on small, one-line menus that take a seat on the peak of the web page and haven’t any submenus.
Listed below are some examples of efficient sticky menus.
The Apple website online has a easy menu and not using a drop-down parts. It takes up little or no area on the peak 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 parts.
However there are circumstances the place a sticky menu would not paintings. As an example, the Parent website online has a big header with the menu underneath that. If the menu used to be made sticky, it will imply that it and the header took up means an excessive amount of of the display area.
The IBM web site includes a menu on the peak of the display with drop-down parts. This web site does not use a sticky menu, almost definitely as a result of the drop-downs, which do not all the time paintings smartly when added to a sticky menu.
The most productive time to make use of a sticky menu is when your navigation menu is on the peak of the display and is an easy, one-line menu. As you’ll be able to see from the examples above, this will paintings with a mega menu, however you do wish to maintain that with care. If the consumer by accident hovers over a sticky menu whilst scrolling down, and all of sudden the mega menu seems, it would possibly not make for the most productive consumer revel in.
Including a Sticky Menu to Your Theme: Getting Began
Now let’s take a look at the code you wish to have to make use of to make your navigation menu sticky.
You’ll be able to want:
- A theme you’ll be able to edit (see underneath).
- A construction set up of WordPress—do not do this for your reside web site!
- A code editor.
- Get admission to in your theme recordsdata.
I’ll be operating on a theme I evolved myself. In case you are the use of a third-party theme, you’ll want to create a kid theme and upload any edits to that. For those who edit the third-party theme itself, you can lose your adjustments subsequent time you replace it.
The Beginning Code
This is the web site I’ll be operating on:
If I scroll down, the menu disappears:
I wish to edit the CSS for the menu in order that it remains on the peak 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 inside of a div component on all pages except for the entrance web page and/or leading weblog web page, the place it's in a h1 component -->
|
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( '/' ); ?>" name="<?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 by means of default within the peak proper of the header. It incorporates touch main points and could also be the place you may 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="#">☰</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" name="<?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 various parts:
- the background to the navigation and header, which is full-width
- the header component itself, which has CSS for width
- the web site name and outline
- the navigation menu
It makes use of CSS from my theme for format, floats, and hues, such because the .proper and .left categories for floats.
Right here’s the CSS for the principle parts 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 might be floating subsequent to one another (the web site name and outline and the menu) use CSS for floats and width that is not particular to those parts:
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 will likely be other from this however will come with styling for backgrounds, widths, and floats in some shape. In case you are growing a kid theme for a third-party theme, take a while to appear over the present stylesheet so what you might be focused on together with your kid theme CSS.
Making the Menu Sticky with Fastened Positioning
Now let’s upload the code to make our menu sticky. The component I wish to goal is the .header-bg component, which incorporates the entirety else.
On your theme, to find the component that represents the menu background or the menu itself if it isn’t wrapped inside of anything. There could be a header component concerned someplace. This is the reason it can pay to make use of a construction set up of WordPress—chances are you’ll wish to experiment!
If you’ve discovered the top-level component that should keep on with the end of the web page, upload this to it:
1 |
.header-bg { |
2 |
place: fastened; |
3 |
peak: 0; |
4 |
width: 100%; |
5 |
}
|
This does the process for solving the menu to the end of the web page, or making it sticky:
On the other hand, there’s a drawback. The menu is overlapping the content material underneath it, on the peak of the display. Once I scroll down this isn’t obvious, but if I scroll as much as the end of my display, the primary line of textual content is hidden.
It’s because the .fastened positioning for the menu has taken it out of the standard glide of the HTML because it’s rendered, that means that the browser renders no matter HTML comes subsequent on the peak of the display.
Let’s repair it. To try this, we wish to upload a margin to the end of the following component, which is a div with the category of .leading. We additionally wish to set a top for the sticky menu to verify it’ll be equivalent to that margin.
To get this proper, I wish to interrogate the CSS for the weather within the .header-bg component, so I will learn how the peak is being computed.
The .header-bg and the header parts don’t have top set, and feature peak and backside padding and margins of 0. If I drill down additional, I will to find the padding for listing pieces inside the menu:
1 |
#menu-navbar li { |
2 |
padding: 1em 5px; |
3 |
margin: 0; |
4 |
}
|
The font measurement for the textual content is equal to for the frame component, so we will take that as 1em. This offers us a complete top of the header bar at 3em.
Right here’s the adjusted CSS:
1 |
.header-bg { |
2 |
place: fastened; |
3 |
peak: 0; |
4 |
width: 100%; |
5 |
top: 3em; |
6 |
}
|
7 |
|
8 |
div.leading { |
9 |
margin-top: 3em; |
10 |
}
|
Observe 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 important for you’re going to rely at the means your theme’s coded.
The menu now seems above the content material because it must:
And after I scroll down, the menu (and the remainder of the header) remains fastened in position:
In order that’s how you are making your navigation menu sticky!
A Sticky Menu Can Fortify Consumer Revel in and Modernize Your Web site
In case your web site has a easy menu on the peak of the display, making it sticky the use of this method will make it more straightforward for customers to get admission to it and navigate round your web site, anywhere at the display they’re.
But when your menu could be very massive, or it is underneath header parts that may take in an excessive amount of area, a sticky menu might take in an excessive amount of area at the display and detract from consumer revel in.
It is your name—however a sticky menu is more straightforward so as to add than you may suppose.
[ad_2]
