Jump to content
kaiserbrand

Social Icons In Classic Nav?

Recommended Posts

kaiserbrand    0
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.com/forum/topic/19563-how-can-i-add-social-icons-to-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(){ ?>
<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

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kaiserbrand    0
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 :)

Share this post


Link to post
Share on other sites
Danny    1,327
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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kaiserbrand    0
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

Share this post


Link to post
Share on other sites
kaiserbrand    0
kaiserbrand

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
ttownsend    6
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!

Share this post


Link to post
Share on other sites
clearpathnet    0
clearpathnet

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • MissT
      By MissT+
      The social icons within the Sitemap Footer section plugin are not longer showing on screen. Site details will be sent via email separately.
      WordPress - 4.7.2
      Pagelines Framework Version 5.0.97
      Platform 5 Version - 5.1.6
      Section Sitemap Footer version - 5.0.4.
       
      All other plugins deactivated.
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


×