Как сделать строку вверху шапки (см. сайт)?

<div>Шапка</div>

Нет?

Как сделать строку ВВЕРХУ шапки? Какой CSS код должен быть?

если нужно прилепить кверху,то к css надо добавить

display:block;

position:fixed;

left:0;

top:0;

width:100vw;

если прилепливать не надо , то

#art-main{

     display:flex;

     flex-direction:column;

}

header.art-header{

    order:2;

}

nav.art-nav{

    order:1;

}

div.art-sheet{

    order:3;

}

ну или что-то вроде этого

Вставляйте в хэдер дополнительный блок и изменяйте стили у остальных элементов. Там применено абсолютное позиционирование, поэтому всё сдвигать придётся.

Перед блоком art-main вставьте новый блок и он будет всегда вверху, а остальное содержимое должно сдвинуться.

Над блоком header ставьте нужный вам блок - это и будет ваша строка. Ну а насчёт CSS-кода, то тут всё зависит от требований. Строка на всю ширину экрана должна быть или только на ширину шапки, нужна ли адаптивность, должна ли она быть зафиксирована вверху при прокрутке. В общем, нужно больше информации.

над <header class="clearfix art-header clickable"> добавить

ну и стили в css перенести

<header class="top" style="height:30px; line-height:30px; width: 1200px; margin: 0 auto; background: #f0f0f0; padding: 0 15px;">

    <ul style="float: right;">

        <li style="display: inline-block;"><a href="#" style="color: black;">Ссылка 1</a></li>

        <li style="display: inline-block; padding-left: 15px"><a href="#" style="color: black;">Ссылка 2</a></li>

        <li style="display: inline-block; padding-left: 15px;"><a href="#" style="color: black;">Ссылка 3</a></li>

        <li style="display: inline-block; padding-left: 15px;"><a href="#" style="color: black;">Ссылка 4</a></li>

    </ul>

</header>

Ну ты загнул... 🤪

Сделал, как mrboweb посоветовал, только почему-то ссылки не работают. Вся строка - одна большая ссылка. Что не так?

По-видимому, javascript работает.