myStickymenu Theme Support

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 πŸ˜‰

myStickymenu v2.0 is out!

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.

112 thoughts on “myStickymenu Theme Support

  1. 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

  2. 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

  3. 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

  4. Hi,

    Great plugin.

    Just one issue, the sticky background color is not working on the front page, all others are fine. Can you help?

  5. 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,

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.