как сделать фон меню сайта на всю верхнюю часть экрана

Question

[ а так должно быть

эта серая полоска(1 картинка) должна занимать всю верхнюю часть экрана(2 картинка), как это сделать?

body{
  background: #202020 url(https://catherineasquithgallery.com/uploads/posts/2021-02/1614280461_59-p-chernii-fon-dlya-chata-70.jpg);
  font: sans-serif;
}
header{

  background: #202020;
  opacity: 0.7;
}
header ul li{
display: inline-block;
margin-right: 29px;
}
header a{
  font: sans-serif;
  font-size: 150%;
  text-decoration: none;
  color:#ffffff;
}
header a:hover{
  font: sans-serif;
  font-size: 150%;
  text-decoration: none;
  color:#ffff52;
}

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<ul>
  <li><a href=''>about us</a></li>
  <li><a href=''>news</a></li>
  <li><a href=''>smth</a></li>
  <li><a href=''>support us</a></li>
  <li><a href=''>contacts</a></li>
</ul>
</header>
</body>
</html>

Answer 1

У вас много дублирующих свойств, к примеру в body вы указали шрифт sans-serif

и этот же шрифт вы зачем-то добавляете к header a:hover и header a.

Проблема была из-за ul(li) так как там есть встроенные фиксированные отступы.

Пришлось немного переписать структуру кода, но в целом результат вас должен устроить =)

UPD: Вот решил немного модифицировать меню. Сделал его адаптивным под мобилки, ух 4 часа ушло )))) В общем суть работы проста, когда размер экрана меньше 768 пикселей, то выходит кнопка (меню) с переключателем появления и исчезновения основного меню. Вдобавок к этому автоматически по вертикали подстраивается колонка всего меню. Попробуйте сами, уменьшите размер экрана браузера и сами все увидите. Все написано на чистом JS.

P.S. Если не хотите адаптивность, то можете не добавлять JS код =)

let a = document.querySelector('.menu');
let b = document.querySelector('.icon');

const media = window.matchMedia('(max-width: 768px)')
function adaptiveMenu(e) {
if (e.matches) {
a.style.flexDirection = "column";
a.style.display="none";
b.style.display ="block";
}
   
else{
a.style.flexDirection = "";
b.style.display ="";
a.style.display = "";   
}
}


media.addListener(adaptiveMenu)
adaptiveMenu(media)

b.onclick = function(){
let visible =['', 'none']

if(a.style.display != visible[0]){
a.style.display = visible[0];   
}

else{
a.style.display = visible[1];       
}   
}

body{
background: url(https://catherineasquithgallery.com/uploads/posts/2021-02/1614280461_59-p-chernii-fon-dlya-chata-70.jpg);
font: sans-serif;
margin:0;
padding:0;
}

.menu{  
padding:5px;
display: flex;
align-items: center ;
background-color: rgba(211, 211, 211, 0.7);
}

.link{
font-size: 200%;
color:black;
text-decoration: none;
margin-left: 3vmax;
}
  
.link:hover{
color:#ffff52;
}

.icon{
text-align:center;
font-size: 200%;
background-color: rgba(224, 255, 255, 0.7);
padding: 5px;
color:black;
cursor: default;
display:none;
user-select: none;
}

<div class ="icon">Меню</div>

<div class ="menu">

<a class ="link" href=''>about us</a>
<a class ="link" href=''>news</a>
<a class ="link" href=''>smth</a>
<a class ="link" href=''>support us</a>
<a class ="link" href=''>contacts</a>

</div>

БЛОГ НА HUSL

как сделать фон меню сайта на всю верхнюю часть экрана

Ответы (1 шт):