Переместить логотип рядом с кнопкой в мобильный вид на сайте Wordpress?
У меня есть одна небольшая проблема с CSS, которую я не знаю, как решить. Я хочу, чтобы в режиме мобильной адаптации поместил логотип в левый верхний угол и переместил кнопку "Sleva platí také na Beats!" вправо, чтобы можно было вписаться в размер экрана смартфона. Чтобы объяснить с помощью изображения, что мне действительно нужно:
Я использую этот CSS для перемещения логотипа ВВЕРХ и влево:
@media screen and (max-width: 479px) and (min-width: 100px) {
.logo.is_logo.tip{
float: left !important;
display: table;
margin: -88px auto 14px;
}
}
но кажется, что при значениях ниже -88px логотип идет под заголовком и его не видно. Может кто-нибудь дать мне инструкции, как это решить? Ссылка на сайт с сайта, на котором возникла проблема.
Его сайт wordpress .. Я не могу вносить изменения в основной код.
кажется, проблема с z-индексом. вам нужно изменить код
Можете ли вы опубликовать это в качестве ответа, пожалуйста? Что именно из z-index?
Ответы 2
у вас заголовок z-index ниже, чем ваш счетчик div.
Добавьте этот стиль и проверьте. вы можете увидеть свой логотип.
@media(max-width: 479px){
#header {
z-index: 999999;
}
.logo.is_logo.tip{
margin: -40px auto 14px;
}
}
При добавлении этот логотип отображается под синей кнопкой, и он не выровнен как изображение в первом сообщении.
вам нужно добавить медиа-запрос. но это не решения.
Я добавил, но не изменил ничего вроде.
Я снова обновил свой ответ. вы не добавили css, упомянутый в вашем вопросе
Решение предполагает расстаться
- Javascript - будет использоваться для перемещения синей кнопки в желаемое расположение заголовка. Будет использоваться if, чтобы заставить его работать только на желаемой ширине.
- CSS - несколько правил для адаптации внешнего вида желания. Медиа-запрос заставит его работать только на желаемой точке останова
JSS
window.onload = function() {
if (window.innerWidth < 768){
const sourceElement = document.getElementsByClassName('btn_calltoaction')[0];
const destination = document.getElementById('header');;
destination.appendChild(sourceElement);
}
}
CSS
@media screen and (max-width: 768px) {
a.btn_calltoaction {
background: #070bf7;
color: #ffffff;
padding: 8px 25px;
font-size: 14px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
border-radius: 3px;
display: inline-block;
color: #ffffff;
padding: 7px 16px;
line-height: 1;
height: 10px;
}
header#header {
display: flex;
align-items: center;
}
.row.clr {
order: 1;
}
#header > .row {
background-image: url();
border-style: solid;
width: auto!important;
}
.mobile_nav.isOpen {
right: 0;
top: 110%;
}
}
НАДЕЮСЬ ЭТО ПОМОЖЕТ :)
Добавьте еще один div с логотипом рядом с синей кнопкой и отобразите в мобильном представлении и скройте на рабочем столе.