Простите за мой программный язык, не владею и описать точно не могу(. Проблема в меню(навигатор). есть 2 блока <div> (вообще <nav>)ссылок и по середине логотип картинка png(1 картинка). На моём мониторе широкоформатном всё хорошо, а если у человека fhd и меньше разрешение, то у человека будешь в логотипе ссылки(4 картинка, логотип убрал, ссылки в ссылках). Лого и ссылки в коллизии. Помогите пожалуйста!
Должно получиться, что при сужении сайта всё будет на своём месте, а не съезжаться. На счёт телефонов, планшетов там бургер меню.
body {
margin: 0;
line-height: 1.0;
}
.bar {
}
.bar span { /* bar menu */
top: 4px;
position: fixed;
color: #fff;
width: 100%;
background: rgb(39 53 70);
line-height: 40px;
padding: 52px 0;
z-index: 5000;
overflow: hidden;
box-shadow: 0 0px 20px rgb(253 93 93 / 98%);
}
#desktop { /* левая менюшка */
display: block;
margin-left: 20%;
position: absolute;
top: 12%;
}
ul {
display: inline-flex;
list-style-type: none;
padding: 0;
margin: 0;
}
a {
color: rgba(255, 0, 0, 0.4);
text-decoration: none;
margin: 0;
cursor: pointer;
padding: 20px 20px;
text-align: center;
width: 70%;
letter-spacing: 1px;
}
#desktop1 { /* правая менюшка */
display: block;
margin-left: 60%;
position: absolute;
top: 12%;
}
ul {
display: inline-flex;
list-style-type: none;
padding: 0;
margin: 0;
}
a {
color: rgba(255, 0, 0, 0.4);
text-decoration: none;
margin: 0;
cursor: pointer;
padding: 20px 20px;
text-align: center;
width: 70%;
letter-spacing: 1px;
}