You can replace this line in UNA’s breadcrumb template:

class="bx-base-general-breadcrumb flex items-center">

with this simpler version:

class="bx-base-general-breadcrumb">

in the file:

modules/base/general/template/breadcrumb.html

Command

To make the change directly from the terminal, go to the una directory run:

sed -i 's/<div class="bx-base-general-breadcrumb flex items-center">/<div class="bx-base-general-breadcrumb">/' modules/base/general/template/breadcrumb.html

This command:

• uses sed (stream editor),
• the -i flag edits the file in place,
• searches for the exact line,
• replaces it with the version without the flex items-center classes.

Clear Cache

After making this change, you must clear UNA’s cache to see the results.

You can do this directly from the UNA Studio:

Go to:

Studio → Dashboard → Clear All Cache (press the Clear All Cache button).

Then reload your website (Ctrl + F5) to confirm the update.

To restore the original line (if you don’t like the result)

Run the reverse command:

sed -i 's/<div class="bx-base-general-breadcrumb">/<div class="bx-base-general-breadcrumb flex items-center">/' modules/base/general/template/breadcrumb.html

Clear Cache

After making this change, you must clear UNA’s cache to see the results.

You can do this directly from the UNA Studio:

Go to:

Studio → Dashboard → Clear All Cache (press the Clear All Cache button).

Then reload your website (Ctrl + F5) to confirm the update.

How to edit the file with Vim

1. Open the file in Vim:

vim modules/base/general/template/breadcrumb.html

1. Press i to enter insert mode.
2. Now you can edit the text.
3. Find the line:

class="bx-base-general-breadcrumb flex items-center">

1. and replace it with:

class="bx-base-general-breadcrumb">

1. When you’re done editing, press Esc to exit insert mode.
2. Type :wq and press Enter to save and quit.
3. (:w = write, :q = quit)

Other useful Vim commands

• :q! → quit without saving
• :w → save without quitting
• /text → search for text inside the file
• n → jump to the next search result

After editing

Go to Studio → Dashboard → Clear All Cache and click the Clear All Cache button.

Then refresh your website (Ctrl + F5) to see the change applied.

Also you can make the breadcrumb bar horizontally scrollable only on touch devices (phones and tablets),

hide the visible scrollbar, and keep everything clean in the Artificer template.

Step 1 — Edit the CSS file

Open:

modules/boonex/artificer/template/css/main.css

and add this code at the end of the file:

/* mobile breadcrumb scroll — only for touch devices */
@media (hover: none) and (pointer: coarse) {
    div.bx-base-general-breadcrumb {
        width: 100%;
        text-align: left;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none; /* Firefox */
    }

    /* Hide scrollbar for Chrome, Safari, Edge */
    div.bx-base-general-breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

Explanation

• The rule @media (hover: none) and (pointer: coarse) ensures this style applies only on touch-screen devices (mobile and tablets), not on desktop monitors.
• overflow-x: auto + white-space: nowrap keeps the breadcrumb on one line and enables horizontal scrolling only when needed.
• The scrollbar is completely hidden visually (scrollbar-width: none and ::-webkit-scrollbar { display: none; }),
• but touch scrolling still works smoothly.
• -webkit-overflow-scrolling: touch ensures smooth native scrolling on iOS.

Step 2 — Clear Cache

After saving the file, go to:

Studio → Dashboard → Clear All Cache,

then press Clear All Cache.

Finally, refresh your website (Ctrl + F5) to apply the changes..

Situation

You manually edited two UNA CMS files:

1. modules/base/general/template/breadcrumb.html
2. modules/boonex/artificer/template/css/main.css

If these files were edited using sudo or as the root user, their ownership may have changed meaning the web server (which runs under the www-data user) might not be able to read or update them properly.

Step 1 — Restore file ownership

To make sure everything works correctly, run the following commands from the root directory of your UNA installation

sudo chown www-data:www-data modules/base/general/template/breadcrumb.html
sudo chown www-data:www-data modules/boonex/artificer/template/css/main.css

This assigns both files to the correct owner and group used by the web server.

Step 2 — Clear UNA cache

After fixing permissions, log in to UNA Studio and go to:

Studio → Dashboard → Clear All Cache,

then click Clear All Cache.

Finally, refresh your site in your browser (Ctrl + F5) to see your latest breadcrumb and CSS updates applied correctly.