Within my HTML file, I have a header containing an unordered list (ul) with list items (li) and anchor (a) elements for the menu.
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
transform: translateY(30%);
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
@media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
height: 100vh;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li><a href="">Продукты</a></li>
<li><a href="">Услуги</a></li>
<li><a href="">Галерея</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>There are some issues with the menu design, specifically a small margin on the left and larger margin on top. These margins were not explicitly set in the code outside of the media query section. Check out this link for more details.
Wishing you a happy new year from Armenia! It's interesting to consider what specific details may be needed by Stack Overflow for assistance.