Posts

Showing posts with the label menu

#600 Fix Wordpress's admin menu issue in Chrome 45

Image
If you noted, the admin menu of WordPress (4.3) is messed in Chrome (v45): According to a StackOverflow post there is a known bug in chrome (more info here ). The source of the problem stems from Slimming Paint which is enabled by default in Chrome 45. Disabling slimming paint fixes the issue. To disable this feature, visit chrome://flags/#disable-slimming-paint in Chrome and Enable the Disable slimming paint option, and make sure the other two Enable options are disabled because they will override the Disable option. Hopefully, it will be fixed in Chrome  version 47 . For now, you can do as following to solve this issue: add this in your template's functions.php (single site) or in mu-plugins/functions.php (multisite): function admin_menu_fix() {     echo '<style>     #adminmenu { transform: translateZ(0); }     </style>'; } add_action('admin_head', 'admin_menu_fix'); References: [0] http://stackoverflow.com/ques...

Multilevel drop-down menu in WordPress with Bootstrap 3

To integrate Bootstrap 3 navigation menu to WordPress you can use the following walker class: https://github.com/twittem/wp-bootstrap-navwalker But, the problem is it only allows a single dropdown level to honer BootStrap 3's mobile first philosophy. Fortunately, the guy this blog post had done a little hack to bootstrap and the walker class above to support multilevel drop-down menu: Blog post: http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/ Github repo: https://github.com/jeffmould/multi-level-bootstrap-menu Basically, what you should do to have a bootstrap 3 style dropdown menu in your WordPress theme are: 1. Copy the  wp-bootstrap-navwalker.php file from the github repo to the theme's root directory 2. Add this style to your theme: .dropdown-submenu{position:relative;} .dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} .dropdo...

Floating navigation menu using jQuery

To create a floating nagivation menu which always stays at the top of the page when you scroll, we can use this script: With the HTML layout as following: <div id="nav"> ... </div> Cool! Reference:  http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/