将按钮旁边的徽标移动到 Wordpress 网站的移动视图中？

Question

我有一个不知道如何解决自己的小 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 徽标下的值会出现在标题下方并且不可见。有人可以给我说明如何解决这个问题吗？ Link 来自存在问题的站点。

Answer 1

解决办法是分开

1. Javascript - 这将用于将蓝色按钮移动到 所需的标题位置。 if 将用于使其仅在所需的宽度上起作用。
2. 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%;
    }
}

希望这会有所帮助:)

Answer 2

您的标头 z-index 低于您的计数 div。

添加此样式并检查。你可以看到你的标志。

@media(max-width: 479px){
#header {   
    z-index: 999999;  
}
 .logo.is_logo.tip{
   margin: -40px auto 14px;
 }
}