მოცემულ ვიდეოში ვაწყობთ მობილურ ნავიგაციას, ჩვენი header-ისთვის
/* laptops */
@media screen and (max-width: 992px) {
....
}
/* tablets */
@media screen and (max-width: 768px) {
....
/* mobile menu styles */
header {
position: relative;
}
header .mobile-menu {
display: flex;
gap: 0 5px;
cursor: pointer;
padding-block: 15px;
}
header nav {
display: none;
}
header nav.active {
display: flex;
position: absolute;
background: var(--sky);
width: 100%;
top: 100%;
left: 0;
flex-direction: column;
padding-block: 15px;
}
header nav.active > div {
display: flex;
flex-direction: column;
text-align: center;
}
header nav.active a {
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
header nav.active > div:last-child a:last-child {
border-bottom: 0;
}
header > .container {
justify-content: space-between;
}
footer {
height: initial;
}
}
/* mobile phones */
@media screen and (max-width: 576px) {
...
}
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით