You'll need a looot of CSS customization.

Start with this snippet from our custom plugin:

<?php

elgg_import_esm('page/elements/topbar');

echo elgg_format_element('div', ['class' => 'elgg-nav-logo'], elgg_view('page/elements/header_logo'));

echo elgg_view('core/account/login_dropdown');

$search = elgg_format_element('div', [
      'class' => 'elgg-nav-search',
], elgg_view('search/search_box'));


$site_menu = elgg_view_menu('site', [
    'sort_by' => 'text',
]);

echo elgg_format_element('div', [
    'class' => 'elgg-nav-collapse',
], $search . $site_menu);

echo elgg_view_menu('topbar');

echo elgg_format_element('div', ['class' => 'elgg-nav-button'], '<span></span><span></span><span></span>');

In \vendor\elgg\elgg\views\default\page\elements\topbar.php

This will break your topbar (hopefully you'll test on localhost before pushing to production, right?).

But then using thebrowser's developer tools you can find the styles to override them.

Unfortunately, I can't provide you with our CSS code because it's so different from the default.

It will take a lot of work and testing before you find the right solution, but the snippet mentioned is a good point to start.

Thanks for the start. I decided to post my train of thought here, because there is so little up-to-date information for Elgg 6 available online, and I thought that maybe my noob topics help others in the future. Someone please correct me, if something is wrong. Reminder: I have zero background in PHP programming. I learn everything about Elgg by trial&error and trying to understand what is happening in the code.

First of all, the way how I understand things now, there are only two files needed for this situation:

\vendor\elgg\elgg\views\default\page\elements\topbar.php (as posted by Nikolai)

and

\vendor\elgg\elgg\views\default\elements\layout\topbar.css

I try to understand what everything in Nikolai's code does:

elgg_import_esm('page/elements/topbar');

I assume that this calls topbar.mjs to create the collapsing menu script.

echo elgg_format_element('div', ['class' => 'elgg-nav-logo'], elgg_view('page/elements/header_logo'));

This is the area where the website's name from the settings page is being shown. Alternatively, if you find the right place in CSS, I think you might be able to insert an image logo here instead, but this is not wanted in general, according to the code notes that I found in some file. ;)

echo elgg_view('core/account/login_dropdown');

This adds the login menu with its own dropdown area for visitors that are not logged in yet. It disappears when you are logged in.

$search = elgg_format_element('div', [
 'class' => 'elgg-nav-search',
], elgg_view('search/search_box'));

This creates the search field.

$site_menu = elgg_view_menu('site', [
 'sort_by' => 'text',
]);

This shows the main navigation in the topbar, which means the links to e.g. blog or pages.

Note for later (and Nikolai): I hide this navigation in my individual layout!

echo elgg_format_element('div', [
 'class' => 'elgg-nav-collapse',
], $search . $site_menu);

This is where it starts to get a bit complicated. This area defines which areas of the topbar will be moved into the hamburger collapsing menu on mobile view (I think). In this case, it moves the search field and the site menu area (or in my case: only the search field).

Now, on top of search and site menu, it also moves the topbar menu (this apparently automatically happens in mobile view as it's not called in the function above). That topbar menu is crucial to the topic of this thread. It's unclear to me how/where this is generated. I found some files for it (see below), but where do the actual links come from, e.g. to settings or profile? What I mean: If I would want to add a link to that menu, where would I do that? I haven't figured that one out yet.

Either way, that topbar menu is a hover menu. I don't know what the official term for this is, so I continue with hover. It means that if I move the mouse over the menu (which says "Account"), a menu magically appears under it showing all the entries/links of that menu. Except, for reasons I haven't figured out yet as well, the message and notification links get moved out of that hover and get their own icons and fields in the menu on full web view. But as soon as you're in mobile view, the message and notifications icons disappear and get moved into the hover menu as well. This is supposed to happen. And this is exactly what I'm currently trying to change: I want those two icons to stay in the topbar as icons also in mobile view. More on that effort below.

echo elgg_view_menu('topbar');

This calls the above mentioned hover menu into the topbar.

The notification icon comes from this file (I think):

\vendor\elgg\elgg\mod\site_notifications\classes\Elgg\SiteNotifications\Menus\topbar.php

The message icon comes from this file (I think):

\vendor\elgg\elgg\mod\profile\classes\Elgg\Profile\Menus\topbar.php

Both files don't seem to be needed in this case, as this indeed seems to be purely solvable in the CSS file. However, theoretically speaking, if one would create an additional topbar menu which would be shown next to the actual topbar menu, I would assume that you could move those two icons here to that new menu. However, you probably have to change a lot more, as this is Elgg and if I learned one thing during my first month with Elgg, it's that everything is at least 10 times more complicated than you think. ;) But at least I hope that my general line of thought is correct here.

echo elgg_format_element('div', ['class' => 'elgg-nav-button'], '');

This adds the "nav button" to the topbar. That "nav button" is the hamburger menu button which is being shown in mobile view.

Now, in the topbar.css I mentioned above, I found various areas of this topbar.php page and was able to manipulate them for testing reasons, e.g. the width of things. I was able to make the "nav button" show all the time. I was able to make the message and notifications icons show larger, meaning with their link texts under them. I was also able to e.g. change the color of the hover areas. Through that I got an idea about what does what which is how I learn about Elgg.

So far, so good. This is where I am at at the moment of writing this post. The answer lies in the CSS for @media. Patience, young padawan, would Obi-Wan Kenobi say.

To Nikolai (in case you are reading this): I use the "Default plus" theme which is available for Elgg 6 on the elgg.org website. That theme uses the same code as the original topbar.php, except that the main menu navigation is hidden:

elgg_import_esm('page/elements/topbar');

echo elgg_format_element( 'div', ['class' => 'elgg-nav-logo'], elgg_view('page/elements/header_logo'));

echo elgg_view('core/account/login_dropdown');

echo elgg_format_element('div', ['class' => 'elgg-nav-button'], '<span></span><span></span><span></span>');

$contents = elgg_format_element('div', ['class' => 'elgg-nav-search'], elgg_view('search/search_box'));
// $contents .= elgg_view_menu('site', ['sort_by' => 'text']);
$contents .= elgg_view_menu('topbar');

echo elgg_format_element('div', ['class' => 'elgg-nav-collapse'], $contents);

Would I be able to get the message and notifications icons shown in media view with this code or do I have to separate the $search and $site_menu nonetheless? I ask, because your code indeed, as you warned, breaks the navigation, but the Default Plus theme works as is. So it would be easier to build on that. From how I understand it, your code doesn't separate the notifications and messages icons from the topbar. The difference lies in the handling of search and main menu. Which both are not needed for my task.

Do I thus assume correctly that what I try to achieve can be done by using the "Default Plus" theme + changes in the topbar.css? That would be most welcome. And please, let me know if anything in my above line of thought is incorrect. I want my noob posts to be helpful for other people as well.

but where do the actual links come from, e.g. to settings or profile?

From register, menu:topbar event. 

You can find all files using Developer Tools -> Inspect -> Events

If I would want to add a link to that menu, where would I do that?

In elgg-plugin.php or Bootstrap class of your custom plugin.

You can unregister the exists events and/or add your own.

Learn more

Would I be able to get the message and notifications icons shown in media view with this code or do I have to separate the $search and $site_menu nonetheless? 

In my example, I just hid them under the navbar.

Note: topbar has 2 sections "default" and "alt".

The Messages and Notifications menu items are located in the default section.
 
As I wrote above, you should solve this with the CSS code.

Use your browser's developer tools (there is a mobile preview option).

You can look at our demo and take the code from there, but you need to register on this site (there is an option to delete an account in the user settings).