• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Genesis Nav Menu Tutorials

Tutorials in this archive relate to the customization and modification of nav menus in Genesis using PHP code & CSS. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Style First Nav Menu Item Using CSS

You can use CSS to style the 1st nav menu item in any theme using : first-child nth-child(1) first-of-type All 3 CSS rules

Nav Menu

Show Genesis Responsive Menu At Different Width In Altitude Pro

This code changes the width at which the Genesis responsive menu is displayed. By default, the responsive menu icon is shown when the screen

Altitude Pro Nav Menu

Different Menu On WooCommerce Pages

This code works in any child theme function file and enables you to use a different menu when WooCommerce pages are loaded. In this case we

Nav Menu WooCommerce

Inline Style Nav Menu Items For Each Category Using walker_nav_menu_start_el

The code in this download folder adds a color picker to your Edit Category Pages which you can set to style each category nav menu item a

Custom Fields Meta Box Nav Menu Taxonomy Terms

Vertical Align Title Area & Menu On Desktops & Mobiles

The solution in this download folder enables you to add a logo of any size and vertically align it with your nav menu like this : This

CSS Grid Columns Custom Logo Nav Menu

Center Site Header Elements On The Same Line

The code in this download folder perfectly centre's your site title or logo next to your nav menu as well as vertically aligned on desktops

CSS Grid Columns Custom Logo Nav Menu

Add Image To Nav Menu Using Customizer

The code in this download folder enables you to add an image via your customizer to your nav menu. In this case, the primary menu however

Customizer Nav Menu

How To Change Default Genesis Responsive Menu Icons

This solution enables you to remove the default dashicons used to open & close the mobile menu and replace them with symbols, text or

Nav Menu

How To Add Your Site Title In Your Nav Menu

This code enables you to add your site title within your nav menu like this : In this screenshot, the site title displays within the

Custom Logo Nav Menu

Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility

CSS Grid Columns Nav Menu Parallax Pro Theme WooCommerce

Menu Logo Menu Using CSS Grid In Newer Versions of Genesis Sample Theme

This tutorial adds a custom left and right menu that work with your custom logo and display inline using CSS grid. If you're using a new

CSS Grid Columns Custom Logo Nav Menu

Add SVG Icons To Custom Nav Menu In Genesis

This code enables you to add simple SVG icons to a custom nav menu named Social in any Genesis child theme. The code is written to detect

Nav Menu Simple Social Icons

Display Search Inline With Genesis Responsive Mobile Menu When Toggled Open

By default, the search form, when added to the nav menu, is displayed within the drop down menu when toggled open. The solution available in

Magazine Pro Theme Nav Menu

How To Modify The Responsive Menu Text In Genesis

This simple solution enables you to change the name of the responsive menu from the default text which is MENU to something else. All you

Essence Pro Theme Nav Menu

Add Header Right Widget & Full Width Menu In Genesis Sample Theme

The code in this download folder adds the header right widget area back to the Genesis Sample child theme and also repositions the primary

CSS Grid Columns Nav Menu

Hide Genesis Responsive Menu On Menu Item Click

This solution enables you to hide the Genesis responsive menu when any menu item in the drop down toggle menu is clicked. Once the menu item

Accordion & Toggle jQuery Scroll Nav Menu

Menu Logo Menu In Old Versions of Genesis Sample Theme 2.2.4

The code in this download folder creates a menu logo menu in the header of version 2.2.4 of the Genesis Sample theme. Note : This solution

CSS Grid Columns Header Image Nav Menu

Essence Pro Logo Menu Search Perfectly Inline

This CSS enables you to display your logo, menu & search form inline like this : You can also display the header elements in any

CSS Grid Columns Custom Logo Essence Pro Theme Nav Menu Search

Menu Logo Menu In Essence Pro

This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this : Centers either

Custom Logo Essence Pro Theme Gutenberg Nav Menu

Uncombine Genesis Responsive Menu

This solution enables you to uncombine menus which display in the responsive toggle menu. By default, the Magazine Pro child theme combines

Magazine Pro Theme Nav Menu

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 5
  • Go to Next Page »

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.