Wordpress中的响应元素

Question

嗨即时通讯有麻烦，真的可以使用一些帮助。

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

在FB和小册子/ PDF图标是在页面底部2种原始html元素和我给他们的类和移动的所有元素，导航栏，FB标志，PDF徽标，标题手动使用CSS

产品类别

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

还是有人知道一个更简单的方法来做到这一点？我不知道任何其他方式让他们在这些地方。

网站：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; 
}