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. If you want to change the background color of the sticky header, do the following… Go to your control panel–>Settings–>myStickymenu–>Style. In the CSS style section, do the following: edit the first item #mysticky-nav.wrapfixed{} to now be
    #mysticky-nav.wrapfixed{background-color:#ENTERYOURCOLORCODE}.

    Go ahead and leave the rest of that section alone.

  2. hey, your plugin is really awesome and helpful. Even more importantly, it actually works while other fail.
    Only one problem I find with it, though: the header, when I\’m not scrolling, go all to the left while it\’s designed to be in the middle of the page. The spacing between elements is also reduced.
    When it scrolls, it scrolls nicely and it\’s centered better. Only the spacing is not good as it should be.
    If you reload any page, typically you should see the header (for a fraction of a second) in the way it is designed, and then it gets pushed to the left.
    I\’d like to donate, but I need these issues to be solved first…. Thank you for this amazing tool!!

    1. Did you tried with a different sticky class? Try some of the following classes/ids (without of the quotes):
      “#Header on the top” or “.elementor-top-section” .

      If this doesnt help try to add this css to css style at the end of the existing code:
      #mysticky-wrap {
      width: 100%;
      }
      #mysticky-nav .myfixed {
      width: 100% !important;
      }

      1. I found that in the Elementor page builder, once you add a name for any section in the CSS ID, you can use #whateveryournameis and this plugin works beautifully.

        Excellent work!

        1. This means you can create a menu using the Navmenu widget in Elementor to create a sticky menu. Just give it a CSS ID and use the ID in My Sticky Menu with the hashtag in front of the name and you should be set.

  3. Thank you for this plug-in! Is there a way to add my logo to the sticky menu, similar to yours on this site? And how can I alter the height of the sticky menu? I would just like it to be a little smaller. Thank you!!

  4. Hi and thanks for your great myStickymenu plugin!

    I am trying to center the chosen sticky div but can only manage an approximate centering adding: position:relative!important; left:10%; (It works approximately for me with a value of 10%) to your default .myfixed css class styling. I’ve been searching about “sticky menu centering” and more general “div centering” but could not find anything working.

    Is there a better, more robust way to center the .myfixed class ?

    Your help would be much appreciated. Thanks in advance.

  5. Thank you for the wonderful plugin.
    I need small help from you.
    My website is hd100.in
    I have some strange problem. My Stickymenu is working perfectly as per my need but it is not working in the HOME page only. In HOME page, I need the same style as per other pages having.
    Thanks,
    Darshan.

Leave a Reply

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