Floating Navigation Controls and Desktop Navigation Bar for Mobile

Hello :wave: This is a simple theme component for make the navigation controls (create topic, notifications and other buttons) floating on mobile. You can also change the navigation bar to the desktop version. This component originally not contained this but I think it would be a good option because of the empty space.

Inspired by Focused Sidebar Theme :heart:

Enable desktop navigation bar.

18 Likes

It would be nice if the floating navigation controls could be changed into something like this.

3 Likes

Hello @Decorbuz,

Yeah, I think it is a great idea to add custom navigation control buttons style. :slightly_smiling_face:

I’ve merged it :tada:

I’ve added a custom nav control buttons enabled setting where you can change these buttons styles.

Screenshot 2022-08-21 at 13.03.26

If you enable this then the other options below that will activate.

You can change the buttons background color, icon color and rounding (border-radius).

There are two sections available:

The default setting is circle buttons but you can change the rounding…

  1. Navigation control buttons except create topic button.

  2. Create topic button
    Screenshot 2022-08-21 at 13.07.09



Edit: I also added the open draft button. Since the label is hidden on custom version so it seems to a good idea to change the button color if draft available.

Screenshot 2022-08-21 at 14.08.22

8 Likes

I’ve made more changes to make it more customizable. :slightly_smiling_face:

  1. Navigation control buttons vertical align. Now you can align the buttons vertical with enable the following setting.
    Screenshot 2022-08-22 at 1.33.32


  2. Now you can set the buttons right and bottom positions too with the following settings.
    Screenshot 2022-08-22 at 1.32.21

  3. I added some settings to the navigation bar customization too. Now you can customize pretty much everything on the navigation bar desktop version with the following settings.


6 Likes

@Don Very nice theme component.

One issue: the floating buttons at the bottom conflict with the updated topic bar (when fixed at the bottom) in this component:
Sticky New Topic Banner - theme-component - Discourse Meta

1 Like

Is there a way to disable that?

Also, it would be nice if you could have the option to only enable the “New Topic” button. Maybe an option to change the “New Topic” button functionality to act like this instead? :thinking:

2 Likes

Yep, this is just a color change. So if you change the draft button colors to the same like create topic button than it will be disable.

Okay, that’s good to know! Thanks! :+1:

hi thanks for this component.

FKB Pro - Social theme - theme - Discourse Meta

How can I use this component with your theme above. Profile and new topic button move together

3 Likes

@Don how can I add nav control buttons? Currently I have only the New Topic and the admin’s mass select button. I’d like to add a button that pops a list of selectable options like the one you use on your instance but only with two options for example

2 Likes

Hello, yeah that was made from Convert the New Topic button to a have a sub menu - #7 by awesomerobot. If I understand correctly what you mean :slightly_smiling_face:

3 Likes

Hello, Oh yeah sorry for the late answer. This is not too compatible with that theme. Because the theme adds custom sections to navigation controls. I have to find an other way to make this. :slightly_smiling_face:

3 Likes

Is it possible to create a back button next to the create topic button? There are many people who find a button at the bottom to go back more comfortable.

This component seems to be broken.

Error navigation-bar was authored using gjs and its template cannot be overridden. Ignoring override.

See https://meta.discourse.org/t/not-recomended-overriding-discourse-templates-from-a-theme-or-plugin/247487

2 Likes

Hi @Don, Is there any chance of this theme component being updated? There isn’t a theme component that performs just that, and I would really love to use the desktop navigation bar on mobile devices. Many thanks