Question

嗨我遇到了麻烦，可以真正使用一些帮助。

我正在使用Visual Composer for Wordpress和免费的宽敞主题来构建我的网站，我使用自定义css来移动导航栏，fb徽标和brochure / pdf图标。

fb和brochure / pdf图标是页面底部的2个原始html元素，我给他们分类并使用css手动移动所有元素，navbar，fb徽标，pdf徽标，产品类别标题

但无论何时放大或缩小屏幕，或将鼠标悬停在图像的下拉列表上，他们都会跳到其他地方，有人可以告诉我如何使它们全部响应，这样它在所有屏幕尺寸上看起来都很不错，甚至可以在没有跳跃的情况下移动？

或者有人知道更简单的方法吗？我不知道有任何其他办法让他们到达那些地方。

网站：http://www.corebusinesssa.co.za/Test/

编辑：下拉已解决但屏幕部分缩小

继承人我的css

.main-navigation {
padding-right; 5px;
}
.main-navigation a {
color: black;
position: relative;
top: -35px;
right: 200px;
} 

.fbicon {
position:relative;
top: -845px;
right: -1200px; 
}

.pdficon {
position:relative;
top: -695px;
right: -1190px;
}

.pdficontext {
position:relative;
top: -650px;
right: -1070px;
color: #0e4776;
font-weight: bold;
}

.contactusheader {
position:relative;
top: -980px;
}

.productcategoriestitle {
position: relative;
top: 50px;
}

Answer 1

下拉菜单位于相对位置，因此当它们出现时会弄乱布局。

如果你想让它们成为绝对的，那么其他元素就不会受到影响。

所以你可以尝试改变下拉列表的位置。 Ad z-index使它们显示在页脚的顶部。

.dropdown-content 
{
    position: absolute;
    z-index: 1;
}

Wordpress中的响应元素

1 个答案: