- This topic has 13 replies, 4 voices, and was last updated 8 years, 9 months ago by
Tom.
-
AuthorPosts
-
April 30, 2017 at 9:24 am #312244
xepace
Hi there. Maybe someone know how to fix position of facebook button on nav menu? I would like to put the button to the right position for all screen resolutions. Like on images
http://i.imgur.com/1vcjtZi.png
http://i.imgur.com/dmX26jU.png
http://i.imgur.com/4WlkB6y.pngApril 30, 2017 at 9:38 am #312250Tom
Lead DeveloperLead DeveloperI think the best way would be to use this hook: https://docs.generatepress.com/article/generate_inside_navigation/
Something like:
add_action( 'generate_inside_navigation','tu_insert_into_navigation' ); function tu_insert_into_navigation() { ?> <div class="my-button-container" Your code in here </div> <?php }Then add some CSS:
.my-button-container { float: right; }April 30, 2017 at 9:53 am #312258xepace
Hi Tom. Sorry I’m noob 100%. I can’t find where to insert your code, because I don’t have inside navigation hook in GP hooks. Should I put this in some php file? Like functions.php
April 30, 2017 at 9:54 am #312260Tom
Lead DeveloperLead DeveloperThis should help: https://docs.generatepress.com/article/adding-php/
April 30, 2017 at 10:36 am #312277xepace
Thank you. It works well on desktop but on tablet and mobile it looks like that:


Maybe some additional CSS will help? Now I have this:.fb-like { float: right; vertical-align: bottom !important; bottom: 2px; right:50px }April 30, 2017 at 1:13 pm #312321Leo
StaffCustomer SupportAre you able to provide a link to your site? Thanks!
April 30, 2017 at 1:16 pm #312323xepace
April 30, 2017 at 6:56 pm #312393Tom
Lead DeveloperLead DeveloperTry this:
button.menu-toggle { width: auto; }May 1, 2017 at 2:44 am #312477xepace
Thank you, Tom! It works well.
May 1, 2017 at 9:04 am #312566Tom
Lead DeveloperLead DeveloperGlad I could help 🙂
July 8, 2017 at 1:41 am #345957nictic
I’m somewhat confused by this thread and then this one https://generatepress.com/forums/topic/social-networks-buttons-on-nav-menu-bar/
If I want to display social icons/buttons in the primary navigation bar and float them right (while menu items remains center) on desktop view, but on mobile view would like the same icons then to display next to the search icon in the nav bar instead of in the (toggled)mobile menu under the other menu items. How would I go about doing that? Keeping in mind my navigation will be sticky on desktop and mobile.
July 8, 2017 at 10:48 am #346093Tom
Lead DeveloperLead DeveloperYou would have to use the above hook method, but tweak it a bit to show it on mobile:
add_action( 'generate_inside_navigation','tu_insert_into_navigation' ); function tu_insert_into_navigation() { ?> <div class="my-button-container hide-on-desktop hide-on-tablet"> Your code in here </div> <?php }July 8, 2017 at 10:12 pm #346259nictic
With this method, I need to use custom code to create my social links instead of creating menu item based social links I take it?
July 9, 2017 at 12:24 am #346293Tom
Lead DeveloperLead DeveloperThat’s right. You can use the built in Font Awesome icons:
<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a>etc..
-
AuthorPosts
- You must be logged in to reply to this topic.