Адаптивный сайт на wordpress. Как заставить номер тел. оставить в шапке?

Question

[Prosto_ya82]

Вообщем то суть вопроса в том, что нужно заставить остаться в мобильных версиях сайта номер телефона в шапке.
Как это сделать безболезненно? и попроще...

Answer 1

[iBird Rose]

ну как я понял по картинке - лого стоит в brand. значит и номер телефона засунь туда же в brand

Answer 2

[Ярослав Иванов]

У тебя callmenu внутри navbar-collapse, который скрыт. Поэтому либо callmenu делать выше navbar-collapse либо добавить этот код в responsive.css

.navbar-brand:after {
    content: "8 (495) 504 15 24";
    color: #28ad11;
    font-size: 18px;
    margin-left: 170px;
    margin-top: -100px;
    position: absolute;
}

.navbar-brand:before {
    background-image: url(https://greenhistory.ru/wp-content/themes/maskitto-light/img/call.png);
    content: '';
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    margin-left: 143px;
    margin-top: 37px;
    background-size: cover;
}

К самому callmenu добавить display:none чтобы скрыть его.

Comments

[Ярослав Иванов]

Вариант рабочий но не доделан. Чтобы смотрелось нормально на всех разрешениях тебе надо будет его добавить во всех media (min-width: ...) и менять значения margin-left и top у классов .navbar-brand:after и before.

[Prosto_ya82]

сейчас попробую..

[Prosto_ya82]

А вот по поводу добавить во все media min-width: и менять значения margin-left и top у классов .navbar: after и before - можно поподробнее пожалуйста?

[Ярослав Иванов]

в responsive.css у тебя есть разные медиа запросы в зависимости от экрана. 768px, 992px и так далее. код, который выше вставь в сам файл в любое место но не в медиа запросы. Только удали margin-left и top.
например:
.navbar-brand:after {
content: "8 (495) 504 15 24";
color: #28ad11;
font-size: 18px;
position: absolute;
}

в сам же медиа запрос вставляй только left и top

@media(min-width:768px) {
.navbar-brand:after {
margin-left: 170px;
margin-top: -100px;
}
}

и так с каждым медиа запросом только значения left и top разные в зависимости от того как будет смотреться

[Prosto_ya82]

ааа с ума скоро сойду... можно вышлю файл - что то ничего не получается ((

Answer 3

[vovkka]

Чуток сжать лого. Расположить тел под лого. Все это должно быть обернуто блоком держателем и спозициониповано по центру.