myStickymenu – Extended style functionality using .myfixed sticky class

So as I said and explain before here myStickymenu is based on javascript which will add .myfixed css class to any predefined element class after scroll by default.

This way we can have custom css style for Sticky class (.myfixed) as well as .wrapfixed and .up and .down classes.

.myfixed css class can be modified through dashboard plugin settings under “Style” tab and “CSS Style” field.

These are defaults:

#mysticky-nav .myfixed { 
margin:0 auto; 
float:none; 
border:0px; 
background:none; 
max-width:100%; 
}

Example 1: Change background color on scroll down or up (Earlier setting for “Sticky Background Color” will be overridden)

#mysticky-nav.wrapfixed.up { 
background-color:#fff;
} 
#mysticky-nav.wrapfixed.down { 
background-color:#ccc;
}

Example 2: Define custom link color while menu is sticky (presuming that your “Sticky class” is “navbar”).

.navbar li a {
color:#FFF;
}
#mysticky-nav .navbar.myfixed li a {
color:#000;
}

Example 3: Add shadow to sticky menu

#mysticky-nav.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.

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

  1. Hi, murdah.

    I’m trying to put the menu, to change the color of the link, when to go down. Here’s your code, but I’m not succeeding.

    My class is: site-header.

    Thank you.

    And Congratulations on the wonderful plugin.

    #mysticky-nav.wrapfixed { } #mysticky-nav.wrapfixed.up { } #mysticky-nav.wrapfixed.down { } #mysticky-nav .myfixed { margin:0 auto; float:none; border:0px; background:#e6eada; max-width:100%; } #mysticky-nav.wrapfixed.down { } .site-header li a { color:#FFF; } #mysticky-nav .site-header.myfixed li a { color:#000; }

  2. Hi,

    I have 2 headers that I need to be sticky when scrolling. The plugin works file for one of the headers.
    Is there a way that I can apply the plugin on 2 header classes.

    Thanks,
    Prabhas

  3. Hi,

    I managed to get the menu to show by using the ‘Theme Support’ code, but the logo and Social media icons don’t show, also the header drops down in size. It would be great if you could resolve this for the Tesseract Theme with Beaver Builder.

    Warm regards – Jeremy.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.