[Resolved] Fixed button position on menu

[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

View post on imgur.com

View post on imgur.com

View post on imgur.com

[Tom]

I 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;
}

[xepace]

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

[Tom]

This should help: https://docs.generatepress.com/article/adding-php/

[xepace]

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
}

[Leo]

Are you able to provide a link to your site? Thanks!

[xepace]

Hi.
https://mylisbon.ru/

[Tom]

Try this:

button.menu-toggle {
    width: auto;
}

[xepace]

Thank you, Tom! It works well.

[Tom]

Glad I could help 🙂

[nictic]

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.

[Tom]

You 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
}

[nictic]

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?

[Tom]

That’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..

[Author]

Posts