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

12 3
Mahol
На сайте с 20.11.2016
Offline
59
2336

Всем доброго вечера.

Как сделать строку вверху шапки у этого сайта?

Требуется просто такая же полоска с несколькими ссылками и соцкнопками, как на скрине.

CSS шапки такой:

.art-header
{
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
-webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.15);
box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.15);
margin:0 auto;
height: 200px;
background-image: url('images/header.jpg');
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
width: 1200px;
z-index: auto !important;
}

Пробовал сначала увеличить шапку, но все её элементы остаются на месте, появляется пустое место внизу. А так не нужно.

jpg 58.jpg
SS
На сайте с 15.12.2015
Offline
56
#1

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

Нет?

Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
Mahol
На сайте с 20.11.2016
Offline
59
#2
SERM-service:
<div>Шапка</div>
Нет?

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

S
На сайте с 13.10.2014
Offline
147
#3

если нужно прилепить кверху,то к 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;
}

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

S
На сайте с 30.09.2016
Offline
459
#4
Mahol:
Как сделать строку ВВЕРХУ шапки? Какой CSS код должен быть?

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
SS
На сайте с 15.12.2015
Offline
56
#5
Mahol:
Как сделать строку ВВЕРХУ шапки? Какой CSS код должен быть?

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

K
На сайте с 08.01.2019
Offline
11
#6
Mahol:
Как сделать строку ВВЕРХУ шапки? Какой CSS код должен быть?

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

Адаптирую Ваш сайт под мобильные устройства. Нужно внести правки в вёрстку? Обращайтесь!
M
На сайте с 04.03.2017
Offline
34
#7

над <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>
100 USD на счет в DigitalOcean (http://clc.to/do100usd) при регистрации по этой ссылке
S
На сайте с 30.09.2016
Offline
459
#8

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

Mahol
На сайте с 20.11.2016
Offline
59
#9

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

jpg 182383.jpg
S
На сайте с 30.09.2016
Offline
459
#10
Mahol:
Вся строка - одна большая ссылка.

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

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий