Отзывчивые элементы в Wordpress

Question

Привет, у меня возникли проблемы и я могу действительно помочь.

Я использую Visual Composer для Wordpress и бесплатную Простую тему для создания моего сайта, и я использовал пользовательский CSS для перемещения значка navbar, fb и брошюры/pdf.

ГФ и брошюры/значок PDF находятся в нижней части страницы 2 сырых HTML элементов и я дал им классы и переместил все элементы, Navbar, FB логотип, PDF, логотипы, товарные категории название вручную с помощью CSS

Но всякий раз, когда вы увеличиваете или уменьшаете изображение на экране или наводите указатели на изображения, которые они перескакивают где-то в другом месте, может кто-то сказать мне, как заставить их реагировать так, чтобы они выглядели хорошо на всех размерах экрана, даже мобильных без прыжков?

Или кто-нибудь знает более простой способ сделать это? Я не знал другого способа получить их в этих местах.

сайт: http://www.corebusinesssa.co.za/Test/

Edit: выпадающий решена, но не сокращается часть экрана

Heres мой 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; 
}