# Top Bar

#### Logged in user

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FW8VYLjTs6Ns3g2sBMsCX%2Ftopbar-universe-moodle-theme.jpg?alt=media&#x26;token=857f9f99-638f-497a-9d18-8b1047a576bb" 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="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FvnDYUlIqXXb9B329Wn4T%2Ftopbar-non-loggedin.jpg?alt=media&#x26;token=1f7dca47-d39c-48b4-bfc6-4d2f884a9726" 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="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FCFBZYHHbFOyRYERUTU0E%2Ftheme-settings-navigation.jpg?alt=media&#x26;token=1010224b-06ce-4636-8568-73afdb40032b" 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="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FqI7xg2Huln5UoM4EIsrb%2Flogo-default.png?alt=media&#x26;token=9b823b35-1562-4b24-9239-2784b586aaa0" alt=""><figcaption><p>Standard, default view</p></figcaption></figure>

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2FgcbtKfm46Z7y8BEHcDSI%2Flogo-container.png?alt=media&#x26;token=b0c63d2a-ab24-4a26-818e-3bb971951c7c" 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="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2F49K4CPRjXt1AjM1vvhGw%2Ftopbar-universe.png?alt=media&#x26;token=dc559eb6-daaf-4ff6-af3b-49fc5fb435e9" alt=""><figcaption></figcaption></figure>

#### Custom HTML Area

<figure><img src="https://3552108913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaXSyla3bpyuFdF1n0Yo%2Fuploads%2Floy4IzIBYIRktaJquXfY%2Fadditional-area.jpg?alt=media&#x26;token=244cf511-0105-4799-8b5e-b7e7a9474a2b" alt=""><figcaption></figcaption></figure>