myStickymenu – Extended style functionality using .myfixed sticky class

myStickymenu is based on javascript which will add .myfixed css class to any predefined element class after scroll by default. For example with default .navbar class:

<div id="navbar" class="navbar"></div>

will become

<div id="navbar" class="navbar myfixed"></div>

after scroll.

This way we can have custom css style for sticky (.myfixed) class, and we are using only existing elements from the page

.myfixed css class can be modified through admin settings under “.myfixed css class”.
These are defaults:

.myfixed {
	margin: 0 auto!important; 
	float:none!important; 
	border:0px!important; 
	background:none!important; 
	max-width: 100%!important;
}

Since version 1.6 myStickymenu plugin wraps the target element in its own custom HTML (see code below) to fix some bugs on different templates.

First div (#mysticky-wrap) is used to copy the original element height, and stay in place so page don’t jump when scroll has taken place. This happens because mystickymenu is using original element from the page (which is no longer in place cause now is fixed on top of page).

Second div (#mysticky-wrap) is used to add a .wrapfixed class on scroll event and by default it has 100% width. This div is also a container for a menu and it keeps menu centered. Since this element is full-width, it’s perfect for attaching the shadow effect using some custom css. Background of .wrapfixed element is defined in “Sticky Background Color” setting field, simply leave it blank if you don’t won’t full width menu.

At the end we have a chosen element, in this case #navbar as a third div. This is your original element div, after scroll plugin will add .myfixed class and copy the original element width.

Before Scroll

<div id="mysticky-wrap" style="">
    <div id="mysticky-nav" class="">
        <div id="navbar" class="navbar" style=""></div>
    </div>
</div>

After Scroll

<div id="mysticky-wrap" style="height: 45px;">
    <div id="mysticky-nav" class="wrapfixed">
        <div id="navbar" class="navbar myfixed" style="width: 1600px;"></div>
    </div>
</div>

So now we can define some custom css style using “.myfixed css class” field to achieve desired style while sticky (on scroll).

For example:

.myfixed {
	margin: 0 auto!important; 
	max-width: 100%!important;
	height:100%important;
	background-color:#ccc!important;
}
.myfixed li a {
	color:#fff;
}
.myfixed .sub-menu li a {
	color:#fff;
	background-color:#234266;
}
.myfixed .sub-menu li a:hover {
	color:#000;
	background-color:#ddd;
}
.myfixed li li a:hover {
	color:#ccc;
	background-color: #000 ;
}
.myfixed li:hover > a,
.myfixed li a:hover {
	color: #234266;
	background-color: #ccc;
 
}
.myfixed .current_page_item > a,
.myfixed .current_page_ancestor > a,
.myfixed .current-menu-item > a,
.myfixed .current-menu-ancestor > a {
	color: #fff !important;
	font-style: normal !important;
	background-color: #C00!important;
}
.myfixed .menu-toggle:hover { /*this changes the mini menu hover feature*/
	background-color: #234266 !important;

If you want to hide sub menu items while menu is sticky:

.myfixed .sub-menu {display:none;}

This examples works with Twenty Thirteen theme, for other themes you will need to enter your element classes if different.

To add shadow to sticky menu you can add smth like this in plugin settings to “.myfixed css class” field. just add it after .myfixed class (this will work on all themes)

.wrapfixed { 
	-webkit-box-shadow: 0 2px 2px 0px rgba(66,66,66,0.3); 
	-moz-box-shadow: 0 2px 2px 0px rgba(66,66,66,0.3); 
	box-shadow: 0 2px 2px 0px rgba(66, 66, 66, 0.3); }

Nice tutorial on how to create sticky header for WordPress using the Bosco theme and myStickymenu – How To Add A New Yorker Style Header To Your WordPress Site (same principle should work for any theme)

Back to myStickymenu plugin page.

60 thoughts on “myStickymenu – Extended style functionality using .myfixed sticky class

  1. Hi! I love the look of the plugin and it’s working great on my site. Could you tell me how to modify it to force it to be present on load and before scroll? I see it somewhat in this post but not savvy enough to make the correct change on my own site. Thank you!

  2. Hi, thanks for the tutorial.
    I’m trying to make the background color of the sticky menu transparent, but keep the text of the menu items at 100% opacity. Do you have any ideas on how to accomplish this?

    Best,
    Fred

    1. Ok in case anybody has the same question, I found the answer.
      In the sticky menu settings, change opacity to 100%.
      Then go to http://hex2rgba.devoth.com and select the color and opacity you want for the background color. Then copy paste the RGB color in the background color field in your sticky menu settings.

      Fred

  3. Hi,

    Thanks for an excellent plugin.

    I am using it one two sites but have just hit a problem. The sticky menu works great on my posts and pages but when I add a lightbox to show images, the menu sticks to the top of the light box. I thought the sticky menu will only show on scroll (my experience on posts and pages) but the lightbox is obviously not being scrolled.

    How can I disable the sticky menu when the light box is displayed? The menu is hiding the top part of photos and that is not good for the gallery view.

    Thanks in advance.

  4. Hey, This plug in looks great. But somehow I could not work around it for my website. I am using a wordpress theme called business3ree by cssigniter.
    Thank you for the help in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *