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.

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

  1. I use myStickymenu on a wordpress site that has woocommerce. It works well with all pages except my “shop” page. when I scroll down the background of the sticky menu disappears. Any suggestions? Thanks

  2. Hi, thanks for a great plugin!

    Is there a way to disable sticky menu at scroll down ONLY on mobile? I would like to have it always visible on desktop and hide on scroll on mobile. I can use some custom css if that is needed.

  3. Hi,

    I am new at CSS with basic knowledge.
    Anyway, I use myStickymenu and I added CSS to page:
    #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); }
    It works nice and I have a question. How to make logo smaller and header height smaller when scrolling down?
    Regards

  4. it\’s not working in mobo devices.
    any additional configuration is there for the same
    I am using OceanWP. theme
    and also I have checked with Chrome, Microsoft Edge 42.17134.1.0 & IE11 browsers and it works only with chrome and in mobo version, its nither works with Chrome nor working with other browsers.
    check my website
    https://www.tradecase.co/

  5. Hi everyone!
    I use mystickymenu and menu work as I would like, but I would add an new element. I would add inscription ”Sklep Olor” on the left side of the menu. What I need change or add to my code ?
    Please Help me if we can, and sorry about my english language.

  6. The plugin works good, it sticky when scrolling but the menu functions don\’t work, can you guys please help? What do I do to make work the menu that is in the top bar?

    1. Hi everyone!
      I use mystickymenu and menu work as I would like, but I would add an new element. I would add inscription \’\’Sklep Olor\’\’ on the left side of the menu. What I need change or add to my code ?
      Please Help me if we can, and sorry about my english language.

Leave a Reply

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