6 replies to this topic

[kaiserbrand]

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

[Rob]

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.

[kaiserbrand]

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

[Danny]

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]

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

[kaiserbrand]

OK, problem solved:

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

 

Thanks again for your help!!!

[ttownsend]

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!