Archived topic
icons on nav menu
12 replies · Started by liorsade8 on September 30, 2017
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
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>
hi
i think i managed to do img... just need to make them clickable
http://ehud.s178.upress.link/
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
Everything looks horizontal to me?: https://www.screencast.com/t/nw8XToJHzdh
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
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....
Try adding this as well:
.mobile-header-content {
display: inline-block;
}
yes i did
but now the toggle had dropped to another line.... please help :)
Here's what I see: https://www.screencast.com/t/FQ2WPanRuz
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
Awesome :)
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