> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/universe-moodle-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rosea.gitbook.io/universe-moodle-theme/theme-settings/top-bar.md).

# Top Bar

#### Logged in user

<figure><img src="/files/07lLbT0dTI2gAHw0W66n" alt=""><figcaption><p>Default view</p></figcaption></figure>

1. Logo
2. Logo Label
3. **Default Moodle Navigation:** Site administration **-** Themes - Theme settings - Custom menu items
4. Custom HTML
5. Dark mode
6. Notification and Messages
7. Languages selector
8. User Menu

#### Non-logged in

<figure><img src="/files/Hbwhr5R30BmBL4yiosQq" alt=""><figcaption><p>View for non-logged in users.</p></figcaption></figure>

1. In-build Moodle Log-in button
2. Custom button *(Top bar - Additional Button)*

#### Change the position of the buttons

*Site administration -> Appearance -> Universe -> Advanced -> Raw SCSS*&#x20;

```scss
.rui-icon-menu--right { flex-direction: row-reverse; }
```

#### Hide nodes in the primary navigation

<figure><img src="/files/tmR3B0gHX0JqczBSK7Pm" alt=""><figcaption></figcaption></figure>

#### Logo container

*Site administration -> Appearance -> Universe -> Top Bar -> Logo as an icon*

You can modify this element using custom CSS. (<mark style="background-color:blue;">.rui-logo-box</mark>)

<figure><img src="/files/l5V149Srb2BbCvIlYZ41" alt=""><figcaption><p>Standard, default view</p></figcaption></figure>

<figure><img src="/files/LnaEwVVhNcHMACh3bRLS" alt=""><figcaption><p>Logo container</p></figcaption></figure>

#### Edit mode button on the top bar

*Site administration -> Appearance -> Universe -> Top Bar -> Edit mode button on the top bar*

<figure><img src="/files/Qj1sfw51tG0MLm6f8YFJ" alt=""><figcaption></figcaption></figure>

#### Custom HTML Area

<figure><img src="/files/GeW2RLNbYbCivZ2KPmDk" alt=""><figcaption></figcaption></figure>