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.

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

  1. Thanks for a great plug-in! It couldn’t have been easier using your tutorials and the help you gave people in the comments. Thank you!!!

    1. Yes it is… you can use css like this (change my-image-class to your real image class or id):

      .my-image-class {height:100px;width:70px;}
      .myfixed .my-image-class {height:50px;width:35px;}

      1. Hi Murdah,

        What i really mean is if i can reduced the size of my logo when scroll.
        Apologize for the confusion.

        Thanks for the code.

          1. Hi Murdah,

            How can I reduce the size of my logo when scroll?
            For ex. my original logo size is max-width: 1101px how can I make it smaller when scroll? or even make it half size from the original?

          2. This example should work for your website livesync.global:
            .myfixed .custom-logo {
            max-width: 75px !important;
            }

            I used !important because original style is applied inline so we force it to use new setting.

  2. Instead to make its width width max 100, how can I make it shorter I tried min-width: 100%; but no way
    Please tell me how can I make it shorter

    1. Under style tab, remove “Sticky Background Color”, press clear and leave that field empty.

      Than under CSS Style field remove “background:none;” parameter from “#mysticky-nav .myfixed {” and add “background-color:#333;” or any color u wish.

      1. Thank you murdah foryour answer
        it didn’t work as i want , i want to make it shorter due to that in mobile the Sticky menu cover all the page.
        I mean, in your message you change X size and I want to change Y size

  3. Hi,
    Great plugin. Simple to use and looks great.
    I have a slight issue with some web page images appearing in front of the sticky menu.
    Is there a method of bringing to the front the sticky Menu so that images don’t appear?
    Thanks,

  4. I’ve used this my sticky header has irritating white background while slightly scroll down. It caused by i changed “Make visible on Scroll = 10px” and “Make visible on Scroll at Homepage=10px” then reset these settings as “0”but when i deactivate this plugin and use another plug-in for make header sticky there occurs white annoying background below the header ! Now re-activate this plugin now but this problem stays there !

    How can i avoid this ? I think this adjustments change permanently on my script variables into my website

    Sorry, im new at js and jquery and dont know how to return old version of this. Also noted that, i did not backup my website

    1. Hey Sebastian

      I’m also using Elementor.
      When I added the scroll menu it seems to disable my Parallax images, how are your parallax images created? via Elementor or another plugin?

      Thanks
      Maddy

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.