How to create a floating button?

4vke
(@4vke)

5 years, 3 months ago
Hello!
I am using the https://ww.wp.xz.cn/plugins/wp-night-mode/ plugin and I want the toggle button to be always visible. Namely: in the lower right corner.

Please tell me how can I do this?

I know that I can put this button in the menu or header, but then it looks very bad on mobile devices.

Thx!
- This topic was modified 5 years, 3 months ago by 4vke.

Viewing 9 replies - 1 through 9 (of 9 total)

David
(@diggeddy)

5 years, 3 months ago

Hi there,

can you share a link to your site where i can see the toggle – we may be able to provide some CSS for what you require.
Thread Starter 4vke
(@4vke)

5 years, 3 months ago
@diggeddy thanks for responding.

Do not pay attention to the fact that everything is crooked there 🙂
This is normal. This is a test site: http://kpoisk.hostenko.net/

The most important thing for me is to add a button to the right or left. So that she is always in sight:
https://prnt.sc/zqp3am

I need to move this button from the menu to the bottom corner (right or left):
https://prnt.sc/zqsb0b

p.s. i use this plugin (documentation): https://github.com/markoarula/wp-night-mode
- This reply was modified 5 years, 3 months ago by 4vke.
- This reply was modified 5 years, 3 months ago by 4vke.
- This reply was modified 5 years, 3 months ago by 4vke.
David
(@diggeddy)

5 years, 3 months ago
That plugin provides a shortcode:

[wp-night-mode-button]

Add it to your use site using a Hook function.
```
add_action('generate_after_footer', function() {
    echo do_shortcode( '[wp-night-mode-button]' );
});
```
This will place it below the content of the page, once its there i can see what HTML it uses and provide some CSS to position it.
Thread Starter 4vke
(@4vke)

5 years, 3 months ago

@diggeddy done.

David
(@diggeddy)

5 years, 3 months ago

Sorry was meant to say how to add the Code – see here:

https://docs.generatepress.com/article/adding-php/

Thread Starter 4vke
(@4vke)

5 years, 3 months ago

@diggeddy Do not worry. I used (only) the shortcode and everything works.
https://prnt.sc/zqxmzf
https://prnt.sc/zqxr1l
David
(@diggeddy)

5 years, 3 months ago
You can add this CSS to fix its position:
```
.wpnm-button.style-1 {
  position: fixed;
  top: unset;
  bottom: 60px;
  right: 60px;
}
```
Thread Starter 4vke
(@4vke)

5 years, 3 months ago
@diggeddy nice!
Thank you so much. This is what I needed. You are the best! 🙂

UPDATE:
~~I hope you haven’t left yet. Do you know why, in the mobile version the button disappears inside posts? There is no such problem with the PC version.~~ FIXED 🙂
- This reply was modified 5 years, 3 months ago by 4vke.
- This reply was modified 5 years, 3 months ago by 4vke.
- This reply was modified 5 years, 3 months ago by 4vke.
- This reply was modified 5 years, 3 months ago by 4vke.
David
(@diggeddy)

5 years, 3 months ago

You’re welcome

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘How to create a floating button?’ is closed to new replies.