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

WP SITES

2671

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Tutorial Requests
  • Contact
  • Videos
  • Tags
  • Log in

Premium Member? - Request custom code

Menu Logo Menu In Genesis Sample Themes Header

This solution adds left and right menus inline with your custom logo like this :

Menu Logo Menu Genesis Sample Theme

Tested using version 2.10 of the Genesis Sample child theme by StudioPress which only works with Genesis 3.0.

Note : If you’re using a new version of Genesis Sample like 3.4, 3.4.1 or newer, use this tutorial instead.

In the above example we overhang the logo however you can modify that simply by adjusting the values for margins in the following CSS rule :


.navigation-container {
    margin-bottom: 58px;
    margin-top: -120px;  
}

And this is the result :

nav custom logo nav genesis sample

Works with or without the sticky header.

Demo Video #

Shows 2 custom menus added to the left and right of the logo in the Genesis Sample child theme by StudioPress.

Also shows both menus combined into 1 responsive drop down menu on smaller screens.

Installation – Support Included #

There’s 7 steps :

Step 1 – Find this code between lines 175 – 176 in functions.php


remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 12 );

And modify it like this :


remove_action( 'genesis_after_header', 'genesis_do_nav' );

This removes the primary nav menu from the header.

Step 2 – Copy the PHP code from functions.php to the end of the Genesis Sample themes functions file.

Step 3 – Copy the following CSS to the end of the Genesis Sample themes style.css file and clear caching.

Register for full access

Related Tutorials

  • Menu Logo Menu Using CSS Grid In New Versions of Genesis Sample Theme
  • Menu Logo Menu Using CSS Grid In Parallax Pro
  • Essence Pro Menu Logo Menu & Full Page Hero Image
  • Genesis Custom Menu – Logo – Custom Menu
  • Add 3 Header Images Via The Customizer in Genesis

Custom Logo Header Image Nav Menu

Reader Interactions

Comments

  1. Joseph Cuccio says

    May 23, 2020 at 12:55 am

    Hey Brad,

    I have:

    GenesisVersion: 3.3.2 & Genesis SampleVersion: 2.2.4

    **configfolder**
    breadcrumbs.php
    contributors.php
    customizer-seo-settings.php
    customizer-theme-settings.php
    layouts.php
    requirements.php
    update-check.php
    update-versions.php

    -No menus.php or responsive-menus.php

    Working on my computer, with DeskTop Server, so I can’t really send you a link. Sorry.

    Suggestions? Thanks in advance,

    -Joe

    Log in to Reply
    • Brad Dalton says

      May 23, 2020 at 4:10 am

      Hey Joe, I’ve emailed you the solution coded into a fresh version of Genesis Sample 2.2.4 however, you might consider updating your child theme.

      I’ll publish a new tutorial because you’re a paying member however, i’ve sent the instructions about where the code is added/modified in the meantime.

      Log in to Reply
  2. Fil Kan says

    August 11, 2019 at 3:36 am

    Hi
    Fine, it works fine now with https://wpsites.net/web-design/menu-logo-menu-in-genesis-sample-themes-header/#responsive-menus.
    But no sub-menu ok ?
    Fil Kan

    Log in to Reply
    • Brad Dalton says

      August 11, 2019 at 4:29 am

      The theme developers removed the sub menu using by adding code in the theme.

      Log in to Reply
  3. Fil Kan says

    August 10, 2019 at 2:20 pm

    Hi

    Ok the problem was the version of genesis sample.
    I found genesis-sample-2.10 and menus.php but now no responsive-menus.php in the config folder…

    Fil Kan

    Log in to Reply
    • Brad Dalton says

      August 10, 2019 at 11:09 pm

      If using 2.10, use this solution for step 4 https://wpsites.net/web-design/menu-logo-menu-in-genesis-sample-themes-header/#responsive-menus

      Log in to Reply
  4. Fil Kan says

    August 10, 2019 at 1:47 pm

    Hi

    In my template folder of
    I have not found the file config > menus.php
    in Step 4 – Modify the PHP code in the config > menus.php file
    All the other steps hare ok

    genesis 3.0.3
    genesis-sample.3.0.1

    Did I miss something ?
    Fil Kan

    Log in to Reply
    • Brad Dalton says

      August 10, 2019 at 10:56 pm

      It’s in the config folder of 3.0.1, just checked. If using 2.10, use this solution for step 4 https://wpsites.net/web-design/menu-logo-menu-in-genesis-sample-themes-header/#responsive-menus

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Brad Dalton Specializes In Genesis child theme customization & code modification. Read More…

Learn PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems