Genesis - How to use navigation icons without a navigation menu

Some of our WordPress themes display social media icons in the navigation at the top of the page. If you would like to display the icons in the navigation without having to display an actual menu, there is an easy workaround.

Using navigation icons without a menu

1. Go to Appearance > Menu > Create a new menu.

2. Click Custom Links on the left.

3. In the URL box, put a pound sign (#).

4. In the Link Text box, put  

5. Click Create Menu. This will give your menu the appearance of being empty and your social icons will display on the right.

Refer to the theme documentation for your theme for instructions on adding your social icons to the Nav Social Icons widget area. 

Remove the menu toggle on mobile

If you're using the Audrey, Clover, Harper, or Magnolia themes, this section does not apply (these themes display a separate custom mobile menu).

Even though your menu will appear "blank" with the above method, the menu button will still display on mobile. If you would like to remove it, go to Appearance > Customize > Additional CSS and paste the following code in the box:

@media only screen and (max-width: 1021px) {
    button.menu-toggle:first-of-type {
        display: none !important;
    }
    .site-container button.menu-toggle {
        display: block !important;
    }
}