Since I seen a lot of your interest in this simple plugin I decided to publish some of the classes and custom css required for myStickymenu to work properly with different themes. I’ll update this post as time passes, please post a comment with your settings for other themes if feel like helping sticky community 😉
So lets start, I’ll put only alerted settings here, use defaults for the rest of the settings or customize it to your own needs.
Celestial-Lite (sticky header)
** Sticky Class => #branding
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed #site-navigation { margin-top:0px!important; } .myfixed #logo img {width: 200px;}
Church Theme
** Sticky Class => #menu-hauptnavi
Customizr Theme
** Sticky Class => .row-fluid (for header) or .nav (for menu)
CyberChimps
** Sticky Class => .navbar-inner
Decode
** Sticky Class => .header-menu
** Make visible when Scrolled after => 370
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; padding-top:5px; padding-bottom:5px; }
Genesis / Dynamik Theme
** Sticky Class(sticky header) =>.site-header
** Sticky Class(sticky menu) =>.nav-primary
Graduate
** Sticky Class => .main-navigation
Graphene
** Sticky Class => #header-menu-wrap
Illdy
** Sticky Class => .top-header
** Disable at Small Screen Sizes => 993
Illdy (mobile support)
** Sticky Class => .header-blog
** CSS Style => #mysticky-nav .myfixed { margin:0 auto; float:none; border:0px; background:none; max-width:100%; } .myfixed .bottom-header {display:none;}
Lawyer theme
** Sticky Class => .wrapper
** .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed { padding-left: 0px; padding-bottom: 0px; padding-top: 0px; } .wrapfixed { -webkit-box-shadow: 0 8px 6px -6px rgba(68,68,68,0.6); -moz-box-shadow: 0 8px 6px -6px rgba(68,68,68,0.6); box-shadow: 0 8px 6px -6px rgba(68,68,68,0.6); } .myfixed .logo img { max-height: 45px; } .myfixed .quick-info { display: none; } .myfixed .mainmenu { margin: 0px } .myfixed .mainmenu { padding-top: 7px; }
Max Magazine
** Sticky Class => #nav
** Make visible when Scrolled after => 250
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } #nav { min-height:40px!important; }
Naturo Lite
** Sticky Class => .header-inner
Nirvana Template
** Sticky Class => #access
OceanWP
** Sticky Class => #site-header
Responsive
** Sticky Class => .main-nav
** Make visible when Scrolled after => 250
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; max-width:100%!important;} .myfixed .menu { background:none!important;}
Spacious
** Sticky Class => #masthead (sticky header)
** Make visible when Scrolled after => 250
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; max-width:100%!important;} .myfixed #site-description { display:none;} .myfixed #site-title a { font-size: 24px; } .myfixed #header-text { padding:0px!important;} .myfixed .main-navigation { padding-top: 0px!important; }
Storefront
** Sticky Class => .main-navigation
Suits
** Sticky Class => .navbar
Tempera Template
** Sticky Class => .menu
Travelify
** Sticky Class => #main-nav
Twenty Sixteen
** Sticky Class => .site-header-main
Twenty Ten
** Sticky Class => .menu
** Make visible when Scrolled after => 370
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .menu {min-height:38px;}
Twenty Eleven
** Sticky Class => #access
** Make visible when Scrolled after => 600
** .myfixed css class => .myfixed { float:none!important; max-width:100%;}
.myfixed .menu { background-color:none; float:left; }
.myfixed div { margin: 0px!important ; padding: 0px 7.6%; }
Twenty Eleven (add search to sticky menu bar)
** Sticky Class => #branding
** Make visible when Scrolled after => 600
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed a {display:none;} #mysticky-wrap {min-height:500px;} .myfixed #site-title, .myfixed #site-description{display:none;} .myfixed #access { margin: 0px auto 0px; } .myfixed #searchform { top: 0.3em!important; }
Twenty Twelve
** Sticky Class => .nav-menu
** Make visible when Scrolled after => 250
Twenty Thirteen (sticky header – add your own custom logo image and edit to suite your needs)
** Sticky Class => #masthead
** .myfixed css class => .myfixed { margin:0 auto; max-width:1070px; width:100%!important;} .myfixed .search-form, .myfixed .site-description, .myfixed .site-title { display:none;} .myfixed .home-link { max-width: 55px; min-height: 38px; margin-left:20px; float:left; background-image: url('logo.png'); } .myfixed .navbar { max-width:645px; float:right;} .wrapfixed .navbar { background-color: transparent; } .wrapfixed ul { padding-right:0px; }
Webnus netStudio theme
** Sticky Class =>.nav-wrap2
Weblizar
** Sticky Class => .row
Wrock Metro Theme (entire header)
** Sticky Class =>#navigation
more to come soon!
Here is a nice list of CSS Classes for menus in all WPZOOM Themes. Big thanks to guys from WPZOOM Themes.
myStickymenu plugin page.
Bless you bro …. it works perfectly… i adjusted mine with the sticky class for my theme and it worked nice.
Thanks a mill for the tip
I really need your help!
– I tried this, but I didnt find it as the best solution. I changed the ID name to something else to try to disable it, and I tried to “unactivate it” / “remove it” as a plugin, but my website does still have the navigation menu as a sticker..
I don’t know what to do
When i scroll down the menu is under the images in the page not above it, how can i fix this problem?
Hi there!
Thanks for the great plugin!
I´m trying to fix a Woocommerce Products sub-menu and I would like it to stop under the exiting header.
Is it possible?
Thanks again
Hi there,
I use “Beautiful Pro Theme” of the Genesis Framework. The plugin works great in desktop mode, but not in the responsive setting for tablets and phones. To say the truth it blocks the menu altogether! I saw a section in the article called “responsive” but it does not serve me …
Could you help me get a look into it?
Thank you for now, and great plugin!
Andrea
Hi,
Great plugin.
Just one issue, the sticky background color is not working on the front page, all others are fine. Can you help?
Hey damiroquai,
I have the same problem as someone previously who was using ‘Zerif Lite’ I tried to resolve it as he was instructed but it didn’t work. It’s concerning the color of the menu bar: After scrolling down the menu bar background disappears, it becomes fully transparent. Only the links and the logo can be seen. I tried different background colors but the transparency problem remains. I am using the Tesseract Theme with the Beaver Builder pluggin. Any ideas?
Hey damiroquai,
it’s a very cool plugin! I have one problem though concerning the color of the menu bar: After scrolling down the menu bar background disappears, it becomes fully transparent. Only the links and the logo can be seen. I tried different background colors but the transparency problem remains. I am using . Any ideas?
Tanks a lot,
Tanks a lot,