How to add a logo to the sticky menu in SiteOrigin’s Vantage theme

Objective

It would be nice if we could add a logo to the Primary Vantage menu when Sticky Menu is enabled
Appearance > Customize > Theme Settings > Navigation > Sticky Menu

Proposed solution

Add a new menu item that is hidden when the page has not been scrolled and displayed when scrolled down

How:

• Set the logo as the background of a new a new menu item that links to the home page
• Hide it
• Show it only when scrolled

Where's the demo ?

This website uses this method to add the logo to the menu so the demo is at the top of the page!

Step-by-step

1. http://beccajcampbell.com/books/the-gift-gremlin-presents-four-free-kindle-ebooks-for-christmas/ Add the logo for use in the menu to the site

• If you have FTP access you can upload the logo to your child themes folder
  e.g. http://mysite.tld/wp-content/themes/vantage-child/img/menuimage.png
• if not then add the logo to your media library and make a note of its URL

2. Wrocław Add a new menu item to the beginning of the primary menu

• Add this code to your Child themes function.php

  add_filter( 'wp_nav_menu_items', 'add_primary_menu_logo', 10, 2 );
  function add_primary_menu_logo ( $items, $args ) {
  if ($args->theme_location == 'primary') {
  $items = '<li class="menulogo"><a href="'.site_url().'">Menu</a></li>' . $items;
  }
  return $items;
  }
  

• Alternatively :
  • If you dont want to add this code, or dont have a child theme
  • or want to add a logo to another menu
    (the code above may work if you know the name used for the menu and change 'primary' in the code above accordingly)
  • or add multiple logos to a menu (e.g. before and after)
    (repeat the steps below to add multiple new menu items)
  • or add the logo in the middle of the menu
    (add the new menu item between other existing menu items)

  You can do it this way:

  • Create a new custom menu item that links to the home page in the menu editor and position it in your menu where you want.
  • Then add this to its CSS Classes: menulogo

3. Add the following CSS to your child theme

Note: Remember to change the background-image url to match the location of the image you uploaded in step 1. above

This CSS code can be added in e.g.

• Appearance > Customize > Additional CSS
• or Appearance > Editor and select "Stylesheet (style.css)" for editing :

/* remove existing background formatting added by theme */
.main-navigation ul .menulogo.current_page_item:hover > a,
.menulogo{
background-color:transparent !important;
}
/* add logo to menulogo item background */
.menulogo a,.menulogo a:hover{
background-image:url('/path/to/menuimage.png') !important;
background-color:transparent !important;
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:0% 0% !important;
text-indent:-9999px !important;
min-width:65px; /* need to adjust this to match your logo proportions */
}
/* add a little extra space after the logo, before the menu items */
.menulogo {margin-right:20px;}
/* hide the menulogo untill the page scrolls */
.menulogo{display:none !important;}
/* display the menulogo only if the page has scrolled */
.sticky .menulogo{display:inline-block !important;}

That should be it!

If you have any ideas to make this better or comments to add please share them below.