WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
Intigrating social icons into Navigation (right hand side) (1 post)

  1. Mr.ShawnP
    Member
    Posted 11 months ago #

    If you goto the demo, you notice a search bar in the menu, this is the place I would like my social icons to show up.

    Below is the code used for social icons, and menu nav.

    Hope someone can help.

    thanks.

    This is the code used for the social icons

    <?php
    
                // First let's check if any of this was set
    
                    echo '<ul class="social-icons">';
    
                    if (!empty($responsive_options['twitter_uid'])) echo '<li class="twitter-icon"><a href="' . $responsive_options['twitter_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/twitter-icon.png" width="24" height="24" alt="Twitter">'
                        .'</a>';
    
                    if (!empty($responsive_options['facebook_uid'])) echo '<li class="facebook-icon"><a href="' . $responsive_options['facebook_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/facebook-icon.png" width="24" height="24" alt="Facebook">'
                        .'</a>';
    
                    if (!empty($responsive_options['linkedin_uid'])) echo '<li class="linkedin-icon"><a href="' . $responsive_options['linkedin_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/linkedin-icon.png" width="24" height="24" alt="LinkedIn">'
                        .'</a>';
    
                    if (!empty($responsive_options['youtube_uid'])) echo '<li class="youtube-icon"><a href="' . $responsive_options['youtube_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/youtube-icon.png" width="24" height="24" alt="YouTube">'
                        .'</a>';
    
                    if (!empty($responsive_options['stumble_uid'])) echo '<li class="stumble-upon-icon"><a href="' . $responsive_options['stumble_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/stumble-upon-icon.png" width="24" height="24" alt="StumbleUpon">'
                        .'</a>';
    
                    if (!empty($responsive_options['rss_uid'])) echo '<li class="rss-feed-icon"><a href="' . $responsive_options['rss_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/rss-feed-icon.png" width="24" height="24" alt="RSS Feed">'
                        .'</a>';
    
                    if (!empty($responsive_options['google_plus_uid'])) echo '<li class="google-plus-icon"><a href="' . $responsive_options['google_plus_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/googleplus-icon.png" width="24" height="24" alt="Google Plus">'
                        .'</a>';
    
                    if (!empty($responsive_options['instagram_uid'])) echo '<li class="instagram-icon"><a href="' . $responsive_options['instagram_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/instagram-icon.png" width="24" height="24" alt="Instagram">'
                        .'</a>';
    
                    if (!empty($responsive_options['pinterest_uid'])) echo '<li class="pinterest-icon"><a href="' . $responsive_options['pinterest_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/pinterest-icon.png" width="24" height="24" alt="Pinterest">'
                        .'</a>';
    
                    if (!empty($responsive_options['yelp_uid'])) echo '<li class="yelp-icon"><a href="' . $responsive_options['yelp_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/yelp-icon.png" width="24" height="24" alt="Yelp!">'
                        .'</a>';
    
                    if (!empty($responsive_options['vimeo_uid'])) echo '<li class="vimeo-icon"><a href="' . $responsive_options['vimeo_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/vimeo-icon.png" width="24" height="24" alt="Vimeo">'
                        .'</a>';
    
                    if (!empty($responsive_options['foursquare_uid'])) echo '<li class="foursquare-icon"><a href="' . $responsive_options['foursquare_uid'] . '">'
                        .'<img src="' . get_stylesheet_directory_uri() . '/core/icons/foursquare-icon.png" width="24" height="24" alt="foursquare">'
                        .'</a>';
    
                    echo '<!-- end of .social-icons -->';
             ?>

    This is the code for the navigation:

    <?php wp_nav_menu(array(
    					'container'       => 'div',
    					'container_class' => 'main-nav',
    					'fallback_cb'     => 'responsive_fallback_menu',
    					'theme_location'  => 'header-menu')
    				);
    				?>

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.