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 coming soon!

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)
** Make visible when Scrolled after => 250

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

Graphene
** Sticky Class => #header-menu-wrap

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

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; }

Suits
** Sticky Class => .navbar
** Make visible when Scrolled after => 350

Tempera Template
** Sticky Class => .menu

Travelify
** Sticky Class => #main-nav
** Make visible when Scrolled after => 270

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
** Make visible when scrolled => 250
** Make visible when scrolled on homepage => 250

Weblizar
** Sticky Class => .row
** Make visible when Scrolled after => 350

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.

92 thoughts on “myStickymenu Theme Support

  1. Hello,

    Thank you very much for developing this plugin. Because my website don´t start the menu in the top zone, but a few pixels below. Above I have it for the logo.

    I give you a link to Imgur. With captures of the parameters that I have for the theme ‘Primer’ (By GoDaddy). In addition there is more information in the description of the images (Class / Style CSS).

    I also show you my demonstration website. It is the one I teach to do in my first course at Udemy, where I recommend some plugins, yours one of them.

    – Link Imgur: https://imgur.com/a/O6RVo

    And I ask you a question at the end… Because I’m interested in knowing how to insert the logo. Before you had it on your website, and I don´t know if maybe… there is no longer that possibility.

    Greetings from Spain!

    1. You can insert the logo, I removed it from my website because too much people asked the same thing over and over again.

      To do it insert logo to div which you want to make sticky, and hide it initially with something like this (use plugin css style field):

      .your_logo_div img {display:none}

      Than simply display it when fixed with this:
      .myfixed .your_logo_div img {display:none}

      Than make some custom css (depending on theme used) to position your logo.

      Hope this helps

Leave a Reply

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