Creating a Social Media Menu from Icon Fonts with FontAwesome
How to make social media menus from icon fonts using the awesome FontAwesome. Fontawesome is widely used and supported in all modern browsers and older browsers. <link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css” rel=”stylesheet”> You can link to the Fontawesome CSS file via a CDN or just copy the download it to your site. If using WordPress you can…
Read MoreAdd a menu to WordPress page with PHP action hooks
Adding a menu to WordPress via PHP and action hooks requires three steps, registering the menu location, assigning a menu to it and then placing the menu with an action hook. Register WordPress Menu Registering a menu is done with register_nav_menu, below is an example to register a ‘Store Menu’ menu. add_action( ‘init’, ‘wpb_custom_new_menu’ );…
Read MoreAdding a Site Login/Logout Link to an existing Menu in WordPress
You can add on to the end of an existing WordPress menu a site login/logout link. The WordPress menu must be registered and have a theme location, this will not work with custom menus. This needs to be added to your theme functions.php file add_filter( ‘wp_nav_menu_items’, ‘themeprefix_login_logout_link’, 10, 2 ); function themeprefix_login_logout_link( $items, $args ) { if(…
Read MoreAdd Search Toggle Icon at End of Menu in WordPress
In WordPress, you can add a search toggle field at the end of a menu using the filter wp_nav_menu_items or a similar menu filter by which you can append menu items at the end of the targetted menu, add a slideToggle with jQuery for the show/hide effect and a bit of CSS. Targetting the Menu…
Read MoreAdd a CSS class on a current active menu item
With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. (function($){ $(function() { // Document Ready activeMenu(); }); // Functions // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu function activeMenu() {…
Read MoreAdd Menu Items at the start or end or in a certain place with wp_nav_menu_filter
wp_nav_menu_filter allows you add items at the end of a menu in WordPress but what about adding an item at the start of a menu or in a specific place. add_filter( ‘wp_nav_menu_items’, ‘prefix_add_menu_item’, 10, 2 ); /** * Add Menu Item to end of menu */ function prefix_add_menu_item ( $items, $args ) { if( $args->theme_location…
Read MoreWooCommerce Accordion Style Expand/Collapse Product Category Menu
Here is a jQuery solution for a WooCommerce accordion style menu for the product category menu that can be assigned with a WooCommerce widget, the menu works best when all product categories are assigned to a parent category. The Accordion menu will then expand and collapse on click with the first parent category appearing expanded,…
Read MoreFlyout Overlay with CSS & Javascript
Building on from 2 previous posts on overly flyout content and animating hamburger icons – I did one more code example with a more minimal approach. The initial same approach is required with 2 x rows of content, one static and the other designated as the overlay flyout with a class of .overlay The toggle…
Read MoreAnimating the Hamburger Menu Toggle
There is a comprehensive animating Menu toggle CSS set of rules created by Jonathan Suh, it’s got more animation options than you can poke a stick at. The basic mark up in HTML is… <button class=”hamburger hamburger–collapse” type=”button”> <span class=”hamburger-box”>< <span class=”hamburger-inner”></span> </span> </button> The second CSS class for the button is the animating class…
Read MoreCreate a content flyout overlay in Beaver Themer Layout Header
This is a starter guide to get you up and running with an overlay flyout on click of hidden content in Beaver Builder – there is nothing indeed Beaver Builder specific about it other than it’s easy to build the overlay content within the builder itself, display it normally in the BB editing screen but…
Read More