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. 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. 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.

When Professional Solutions develop a website with the Vantage theme we provide a Child theme that adds extra features to the WordPress Customizer.

The feature in this article is added by default to our Vantage Child theme so it is easy for our clients to add/change/remove a menu logo by using the WordPress Media Library, set the spacing of the logo to the menu and adjust the logo proportion without having to add or change any code themselves.

If you have a new project please contact us for a no obligation chat about how we can work together.

Posted in Tips, Vantage, Web Design, Wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *