Jump to content


Photo

Social Icons In Classic Nav?

social icons classic nav position navigation

Best Answer Danny , 10 December 2012 - 11:09 AM

Hi,

 

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>
</div>
<script type="text/javascript"> 
jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);});
</script>
<?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:

 

http://d.pr/i/zl8o

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 kaiserbrand

kaiserbrand

    Member

  • Members
  • 10 posts
  • LocationBerlin
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 08 December 2012 - 08:26 PM

Hello!

 

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 http://www.pagelines...the-brand-nav/, 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: http://wuoau.org/

 

My additional function in functions.php looks like this

 

 add_action('pagelines_inside_bottom_nav', 'social_icons'); function social_icons(){ ?>
</p><div><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,
Wolfgang


#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 December 2012 - 09:58 PM

Wolfgang,

 

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.



#3 kaiserbrand

kaiserbrand

    Member

  • Members
  • 10 posts
  • LocationBerlin
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 10 December 2012 - 10:10 AM

Hello!

 

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: http://wuoau.org/

 

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 :)



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16923 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 December 2012 - 11:09 AM   Best Answer

Hi,

 

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>
</div>
<script type="text/javascript"> 
jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);});
</script>
<?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:

 

http://d.pr/i/zl8o


  • kaiserbrand likes this

#5 kaiserbrand

kaiserbrand

    Member

  • Members
  • 10 posts
  • LocationBerlin
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 10 December 2012 - 03:51 PM

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
 align="right"
, but they stay glued to the top of the nav bar. Is there a way to center them vertically?

 

Thanks,

Wolfgang



#6 kaiserbrand

kaiserbrand

    Member

  • Members
  • 10 posts
  • LocationBerlin
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 10 December 2012 - 04:03 PM

OK, problem solved:

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

 

Thanks again for your help!!!



#7 ttownsend

ttownsend

    Advanced Member

  • Members
  • 39 posts
  • LocationOttawa, Ontario, CANADA
  • Country: Country Flag

Posted 21 December 2012 - 05:03 PM

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 there...how should Danny's code get put into the custom code section?

 

Many thanks,

Trevor

 

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



#8 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 14 June 2013 - 12:17 AM

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.

 

http://i.imgur.com/RMl20Bx.png

 

Any Suggestions?

 

-Ian



#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 June 2013 - 12:55 AM

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







Also tagged with one or more of these keywords: social icons, classic nav, position, navigation