Social Icons In Classic Nav?

9 posts in this topic



I'm having trouble placing the social icons in the same "row" as the main navigation (I'm using the classic nav). The ideal result would be the navigation aligned left, the icons right.


I tried the function for the customize plugin Danny provided in this post, and tried to locate the correct position with ActionMap.


With this I was able to place the icons anywhere within the page but the same row as the navigation. I thought "pagelines_inside_bottom_nav" would do the job, but all that happens is a line break.


You can see my problem here:


My additional function in functions.php looks like this


add_action('pagelines_inside_bottom_nav', 'social_icons'); function social_icons(){ ?>
<div class="icons" align="right">
I'm an animator, not a web designer. Maybe I just can't see the super-easy & super-obvious solution :)
Greetings from Berlin,

Share this post

Link to post
Share on other sites



Before we begin, I'm confused as your current site seems to be in PlatformPro, not PageLines Framework. Are you using Framework in a development site?


The social icons you see in the Branding area can't be pushed down into the Menu (Classic or NavBar) as this would a z-index problem.  However, you can place them within the menu. There are several ways to accomplish your goal. Some by direct links, others by CSS.  Which are you more comfortable, noting your comment about being a graphics artist, not a web designer?  Either method can be a bit tricky.

Share this post

Link to post
Share on other sites



Thanks for the quick reply!


Yes, the old website on our main domain is platform pro, but the new website in development is pagelines framework. That's why I've inserted the extra link above:


To answer your question: To me it doesn't matter if it's CSS or direct links. I'd like to try the cleanest method possible. And I like tricky :)

Share this post

Link to post
Share on other sites



Use this as an example:


// ------- ADDS SOCIAL ICONS TO BRANDNAV ------- //
add_action('get_search_form', 'social_icons'); function social_icons(){ ?>
<div class="icons" style="bottom: 12px; right: 1px;">
<a target="_blank" href="#/feed/" class="rsslink"><img src="/wp-content/themes/pagelines/sections/branding/rss.png" alt="RSS"></a>
<a target="_blank" href="#" class="twitterlink"><img src="/wp-content/themes/pagelines/sections/branding/twitter.png" alt="Twitter"></a>
<a target="_blank" href="#" class="facebooklink"><img src="/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"></a>
<a target="_blank" href="#" class="linkedinlink"><img src="/wp-content/themes/pagelines/sections/branding/linkedin.png" alt="LinkedIn"></a>
<a target="_blank" href="#" class="youtubelink"><img src="/wp-content/themes/pagelines/sections/branding/youtube.png" alt="Youtube"></a>
<a target="_blank" href="#" class="gpluslink" style="opacity: 0.5; "><img src="/wp-content/themes/pagelines/sections/branding/google.png" alt="Google+"></a>
<script type="text/javascript"> 
jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);});
<?php }


In your code, you were using the wrong location, I've replaced it with the "get_search_form", now all you need to do is use this CSS

#site .section-nav .searchform { display: none; }

To hide the search form in your NavClassic menu and the end result should look something like this:

1 person likes this

Share this post

Link to post
Share on other sites

Wow, thanks! That is exactly what I was looking for!


By the way: of course, that only works if the search field isn't hidden in the "Header And Footer" PageLines settings... took me a while to figure that out!


I have one more question: the style elements

style="bottom: 12px; right: 1px;"
 you used in your example have no effect on the location of the icon set. I could arrange the icons at the far right with

, but they stay glued to the top of the nav bar. Is there a way to center them vertically?




Share this post

Link to post
Share on other sites

OK, problem solved:

<div class="icons" align="right" style="margin-top: 5px;">


Thanks again for your help!!!

Share this post

Link to post
Share on other sites

Hi all - I have a quick question about this as I'd like to align my social media icons the same way.


I'm using brandnav and wonder just what should the custom code section look like?  I haven't added any at all yet, and there is a body{} entry should Danny's code get put into the custom code section?


Many thanks,



EDIT:  I'm not using Custom menus and can't seem to get this method working!

Share this post

Link to post
Share on other sites

Hey guys, Im trying to get this to work but I am having trouble. I am placing it in the "header" section of the custom coding. It simple just displays the icons above the NavClassic on the far left margin. How do I get it to place into the NavCLass bar where the search bar is?


Here is a screen of it right now.


Any Suggestions?



Share this post

Link to post
Share on other sites

Did you add the css to align the icons like in the posts following the code?

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • How centger navigation in DMS?
      By jeomiland+
      Have searched in the topics for "How to center top navigation" and see Simon's CSS solution from back in 2012, but that didn't work for me. Anyone know how to center top navigation in DMS 2.2? Used Navi in Fixed area, (added Navbar under Navi to experiment, but that may be removed soon.)
    • DMS 2 Navbar menu repeats in hamburger mode
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

    • More than 2 Mobile Menus
      By mistrmint+
      Is it possible to include more than 2 mobile menu's on the site?
      I am using 4 menu's but in mobile only the first 2 are clickable.
      Menu 4 is on a standalone page. If I click the menu on this page, the primary 2 menu's appear.
      i.e. Menu 4 is not clickable.

    • Header formatting
      By richardjacruz+
      I saw this website build with PageLines DMS:
      I want to have a header that's VERY similar. However, with the fixed area, I'm struggling with how to do that. 
      I want to have a "super menu" under one of the tabs, and drop downs for others, a larger logo to the left like this, a search all the way to the right, and a call-to-action at the top like we see with "Donate" (I want "Request a Quote").
      What area (fixed or header) is best to use for this, and, within that area, what are the best sections to place?
    • alternate social icons, SSL/non-SSL mixed errors w/social and shoppingcart
      By jeomiland+
      In post 34871-sharebar-issues Danny suggests one can use any of the icons in font-awsome for social share icons. What's the best way to use other images?  Client asked me to implement the icons at  specifically #20 "20 Social Media Icons". Have downloaded the zip file containing those icons but where/how get them to show up on the site?
      So I am referring to both the icons to send visitors to the site owner social properties AND shar icons so people can Like, share ect.
      Upon further research, I see a discussion on problems with using social icons on SSL (https://...) sites since a warning message comes up complaining about mixed SSL and non-SSL content on the page? Since this site is a shoppingcart site, using Woocommerce, this could be a problem. What's the current wisdom on dealing with this?  Also, I read a while ago there can be a performance hit if one makes their whole site SSL, so since Wordpress and themes adds significant overhead, what's the current wisdom on this issue?  SSL for all pages or just for shoppingcart checkout/account info pages?