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

92

Mahol

26 февраля 2019, 19:16

2554

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

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

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

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

83

SERM-service

26 февраля 2019, 19:25

#1

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

Нет?

Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)

92

Mahol

26 февраля 2019, 19:49

#2

SERM-service:
<div>Шапка</div>
Нет?

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

S

171

silicoid

26 февраля 2019, 20:46

#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

469

Sitealert

26 февраля 2019, 22:11

#4

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

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

SS

83

SERM-service

27 февраля 2019, 09:02

#5

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

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

K

11

Kodmaster

28 февраля 2019, 17:01

#6

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

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

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

M

34

mrboweb

28 февраля 2019, 19:41

#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>

1

100 USD на счет в DigitalOcean (http://clc.to/do100usd) при регистрации по этой ссылке

S

469

Sitealert

28 февраля 2019, 19:57

#8

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

92

Mahol

17 марта 2019, 17:48

#9

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

jpg 182383.jpg

S

469

Sitealert

17 марта 2019, 18:01

#10

Mahol:
Вся строка - одна большая ссылка.

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

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Что делать, если ваша email-рассылка попала в спам