[Resolved] social icons (Tom's?) in top bar below nav.?

[Howard]

Hi Tom or Leo:
Got my header and navigation merged nicely. I seem to be unhappy with fontawsome, particularly in navigation. Is there any way of getting Tom Social icon (or outside plugin) into NAVIGATION…or if not,(mabybe even nicer) what about getting HEADER BAR BELOW navigagion (and putting in social icons) ..as it looks MUCH BETTER ON mobile than sticking above the navigation bar??
Thanks
Howard

[Leo]

Hi there,

Might be able to use a plugin like this to add widget into menu: https://en-ca.wordpress.org/plugins/advanced-menu-widget/

Or what don’t you like about FontAwesome in menu? Perhaps we can style them with some CSS?

Let me know 🙂

[Howard]

Hey Leo:
Thanks for reply
Will check out plugin suggestions as it has some good reviews… will get back to you and go from there-
Thanks
Howard

[Howard]

Hi Leo
the advanced plugin did not seem to get what I need. I believe you gave me one solution previously but it got a bit confusing for me as a NOVICE..so Ill need the info again…unless, there is a better or easier way.

So: if you go to my site (https://www.rawassertions.com) on mobile you will see the twitter link icon i added. Of course, we must open the mobile menu to see it. Please give me the BEST way to get those icons on MOBILE..to show on the NAVIGATION menu bar instead of having to OPEN menu icon dropdown; preferebly towards the right or wherever it might fit and yes, I could them style them with some CSS, AS YOU mentioned.
Thanks
(ps..some time before you mentioned php code…GREEK TO ME
Howard

[Leo]

Ahh this is what you need: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

Let me know if you need more info 🙂

[Howard]

Hi: Before I try out SNIPPETS plugin, is there a way to get my HEADER/LOGO mobile (and/ or both desktop) to look like this:

http://dailycaller.com/2018/01/08/leaked-memo-dreamers-are-critical-to-dems-future-electoral-success/?utm_medium=email

Howard

[Leo]

That snippet will add content into the mobile header which is what you wanted – see the social icon before opening the menu.

Give it a shot and let me know if it isn’t.

[Howard]

Hi Leo
Seem to be having problems implementing the FONTAWSOME MEDIA ICONS onto menu navigation bar MOBILE..without having to OPEN mobile menu to SEE the icons. Also, typography sizing on typography changes BOTH MENU ITEMS AND fontawsome..and when going to COLORS…PRIMARY NAVIGATION..nothing.(HOWEVER: when making a secondary menu for fontawsome which i tried..sizing and color worked..(but it still did not show the icons on MOBLILE BAR WITHOUT having to OPEN the menu)

I installed MY CUSTOM php plugin and added these coding as per generatepress instructions.

<i class=”fa fa-car” style=”color:#DDDDDD;”><!– icon –></i>
<i class=”fa fa-car fa-5x” style=”color:#DDDDDD;”><!– icon –></i>
add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
function tu_mobile_header_html() { ?>

Your mobile header HTML in here

<?php }

Went over many things, but seems to be problem
Thanks
Howard

[Leo]

You need to replace “Your mobile header HTML in here” with your actual content – in your case the icons.

[Howard]

I will assume you mean the “ icon code “ for twitter from fontawsome that I have pasted into MY menu Custom link drop down????

[Leo]

Yeah it should be something like this:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
        <i class="fa fa-car" aria-hidden="true"></i>
    </div>
<?php }

[Howard]

Thanks for reply!
So: I follow your above code; and I see it also includes : FONTAWSOME sizing and COLOR coding which I did correctly at first.
This then should THEORETICALLY let me change color and size of icons through my PRIMARY menu options as well as PUTTING my mobile icons on navigation bar as well without the drops down menu on mobile? I put all this into CODE SNIPPETS…. I hope it works 👍

PS I had already put in
<i class=”fa fa-car” style=”color:#DDDDDD;”><!– icon –></i>
<i class=”fa fa-car fa-5x” style=”color:#DDDDDD;”><!– icon –></i>

ALL above looks correct??
Will let you know🙏

[Howard]

PS… will the above ( if done correctly) also Differentiate the size adjustment between Fontawsome icons on RIGHT of nav bar with the MENU text to the left? ( previously, as I increased font size… icons got Bigger, but MENU text became HUMONGOUS!!!
Thanks

[Leo]

If you add inline style with fontawesome icon then you wouldn’t be able to control the sizing through the customizer.

Also looks like you are not using mobile header currently so the code wouldn’t work.

[Howard]

Leo;
Must I put all this code into snippets for EVERY ICON I want hidden on mobile menu… or just add the twitter, YouTube.. Facebook line codes inside the ONE time ABOVE SNIPPET.?
I guess I mean should I put ALL the above in all 3 times for 3 different icons?
Howard

add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
function tu_mobile_header_html() { ?>

<i class=”fa fa-car” aria-hidden=”true”></i>

<?php }

[Author]

Posts