[Resolved] icons on nav menu

[liorsade8]

hello
i managed to add icons to the nav menu

with this code:

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

but when i do it <a herf…. clickable like:

<a href="tel:072-2150666" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i></a>
<a href="www.facebook.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>

it shows them vertical and not HORIZONTAL as i want it to be.
please help me understand how to make them horizontal with spacing between them and also clickable.
here is a picture:
https://postimg.org/image/sw25cuf9n/

also,
if i want to put an img instead of an font awesome – what is the code for that? and where should i upload the img and where to call it from… link i mean…
thanks

[Tom]

Can you link me to the page possibly?

To do an image, you can do this:

<a href="tel:072-2150666" target="_blank" rel="noopener noreferrer"><img src="URL TO YOUR IMAGE" /></a>

[liorsade8]

hi
i think i managed to do img… just need to make them clickable
http://ehud.s178.upress.link/

[liorsade8]

this is the code i put in functions.php:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
<div class="mobile-header-content">
<i class="fa fa-phone"></i> | <i class="fa fa-facebook"></i> | <img src="https://www.uplaw.co.il/wp-content/uploads/2017/06/waze.png" alt="" width="38" height="40" /></a
</div>
<?php }

now, if i’ll put:

<a href="tel:072-2150666" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i></a> | <a href="//?ll=31.787739,35.203435&navigate=yes" target="_blank" rel="noopener noreferrer"><img src="https://www.uplaw.co.il/wp-content/uploads/2017/06/waze.png" alt="" width="15" height="15" /></a> | <a href="mailto:uri@uplaw.co.il" target="_blank" rel="noopener noreferrer"><i class="fa fa-envelope"></i></a>

they will be vertical and not horizontal

[Tom]

Everything looks horizontal to me?: https://www.screencast.com/t/nw8XToJHzdh

[liorsade8]

heheh i know!
but this isn’t clickable links…. just icons…. not <a href …
which i want it to be.
when i do them clickable they go vertical
look now
http://ehud.s178.upress.link/

thanks

[liorsade8]

hi
i have added:
.mobile-header-content a {
display: inline-block;
}

or

.mobile-header-content a {
display: inline;
}

and it’s showing horizontal….
but now the toggle menu has droped a line….

[Tom]

Try adding this as well:

.mobile-header-content {
    display: inline-block;
}

[liorsade8]

yes i did
but now the toggle had dropped to another line…. please help 🙂

[Tom]

Here’s what I see: https://www.screencast.com/t/FQ2WPanRuz

[liorsade8]

hey, yes, i figured it out
i needed to do:

.mobile-header-content {
display: inline-block;
}
and also

.mobile-header-content a{
display: inline-block;
}

and it worked.
thanks

[Tom]

Awesome 🙂

[liorsade8]

BTW – someone told me to put everything on header php instead of functions…. what do u think?

also – please help me & LEO out in the support:
https://generatepress.com/forums/topic/one-page-scrolling-site-sticky-menu-is-gliding-over-the-text/
he can’t seem to help me out…
thanks

[Author]

Posts