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

[Leo]

Not sure what you mean? If you need three different icons then you will need to add them all in?

You can add the rest after the <i class=”fa fa-car” aria-hidden=”true”></i> line.

[Howard]

Leo
Does this look ok to enter into code snippets (dont want to break anything) twitter, youtube google plus

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

<i class=”fa fa-car” aria-hidden=”true”></i>
<i class=”fa fa-twitter-square” aria-hidden=”true”></i> <i class=”fa fa-youtube-square” aria-hidden=”true”></i> <i class=”fa fa-google-plus-square” aria-hidden=”true”></i>

<?php }

Thanks Howard

[Howard]

Actually I left out div THIS IS WHAT I WILL PUT IN??

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

<i class=”fa fa-car” aria-hidden=”true”></i>
<i class=”fa fa-twitter-square” aria-hidden=”true”></i> <i class=”fa fa-youtube-square” aria-hidden=”true”></i> <i class=”fa fa-google-plus-square” aria-hidden=”true”></i>

<?php }

[Leo]

I still don’t see the div, 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>
        <i class="fa fa-car" aria-hidden="true"></i>
        <i class="fa fa-car" aria-hidden="true"></i>
        <i class="fa fa-car" aria-hidden="true"></i>
    </div>
<?php }

You should only have to replace the repetitive icons to what you want.

[Howard]

Hi Leo
Things not working out.
Added snippets:
add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
function tu_mobile_header_html() { ?>
   

        <i class=”fa fa-twitter-square” aria-hidden=”true”></i>
        <i class=”fa fa-youtube-square” aria-hidden=”true”></i>
        <i class=”fa fa-google-plus-square” aria-hidden=”true”></i>
   

   
<?php } 

With mobile header enabled in header under mobile header
Icons hidden in top right black of menu
———————————————-
————navigation menu————————————

Menu

Menu

With mobile menu disabled in header under header
———————————————
_________________Navigation menu

Menu

What I want:
See DESKTOP view:
https://www.rawassertions.com
Social icons centered in secondary navigation under primary navigation

Howard

[Howard]

Snippets were properly put in as below previous above did not copy to message properly

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>
        <i class="fa fa-car" aria-hidden="true"></i>
        <i class="fa fa-car" aria-hidden="true"></i>
        <i class="fa fa-car" aria-hidden="true"></i>
    </div>
<?php }

[Howard]

Div .. not showing on I phone BUT is THERE as your previous email above.
Howard

[Leo]

Ahh you have to highlight them and click “code” in the editor.

Can you try activating the mobile header? https://docs.generatepress.com/article/mobile-header/

It should give you the layout you currently have.

[Leo]

If you changed your mind and decided to use the secondary navigation, then the solution would be different.

To disable secondary navigation toggle, this should help: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Howard]

It worked!!!! Hallelujah and looks good. Thanks for the help.
One question:
If I do some spacing and /or padding adjusting on desktop for sec nav and content looks, will it also change on mobile device?
Thanks so much
Howard👌

[Leo]

Adjusting spacing using CSS?

If so yes but you can use media query:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

[Howard]

Thanks will check it out
Thanks again

[Leo]

No problem 🙂

[Howard]

Hi Leo
Is it possible to put a line ( with color option) under SECONDARY NAVIGATION on desktop and mobile for all pages?
Eg.
Secondary navigation
——————————————————————-
Thanks
Howard

[Leo]

This CSS should do:

.secondary-navigation {
    border-bottom: 2px solid #000000;
}

If you only want it on desktop:

@media (min-width:769px) {
    .secondary-navigation {
        border-bottom: 2px solid #000000;
    }
}

[Author]

Posts