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.
Plugin works on scroll down but menu functions like sticky background don’t work at all!
Hello,
The logo looks a little bit narrow on mobile screens, do you know how can I fix this?
Thanks in advance!
Primary Menu is not able to display in mobile or tab screen
Hello!
I certainly like the plug-in as well as many!
But there is in my opinion one bug – when changing the scale and resizing or updating the page, the sticky menu disappears, then it appears when the page is dragged down.
Can you help me or fix it somehow? help me please
brilliant plugin! Thanks a lot. I use it to stick the menu and change the size of the menu elements (font-size). I want also my logo to skale down a bit, along with the text. any idea how I can do that?
How can I stop displaying the menu when page is not scrolled? sticky class is .navigation-top
How can I disable mystickymenu on mobile? Thanks!