Как создать адаптивный заголовок, как на сайте Valorant? ⇐ CSS

[Anonymous]

Я только начал программировать в течение 2 месяцев и пытаюсь скопировать отзывчивость заголовка официального сайта valorant. Мне удалось скопировать только то место, где список заголовков, например [Информация об игре, СМИ, Новости, Таблицы лидеров, Поддержка, Наши социальные сети, Киберспорт], будет реагировать. В полноэкранном режиме все видно, но если пользователь уменьшит браузер, списки заголовков будут медленно уменьшаться.
Моя проблема:
Есть значок поиска в заголовке он развернется, если пользователь щелкнет по нему. Моя проблема в том, что я уменьшаю браузер, но пока не нажимаю на значок поиска. Когда браузер уменьшен, щелкните значок поиска. После нажатия он оттолкнется вправо от земного шара и нажмите кнопку «Воспроизвести сейчас». На официальном сайте valorant список заголовков уменьшится.
Официальный сайт Valorant — при уменьшении размера
введите здесь описание изображения
Мой сайт-клон - при уменьшении размера
введите описание изображения здесь
https://codepen.io/gmadrian2000/pen/gOVqPaW

Код: Выделить всё

    


[i]
[img]img/logo-red.png[/img]
arrow_drop_down[/i]

[url=index.html][i][/url]

[list]
[*]
[url=#]Agents[/url]
[*][url=#]Maps[/url]
[*][url=#]Arsenal[/url]
[*][url=#]Premier[/url]
[/list]


[*][url=#]Media[/url]
[*][url=#]News[/url]
[*][url=#]Leaderboards[/url]
[*]
[url=#]Support[i]arrow_drop_down[/i][/url]


[list]
[url=#]Specs[/url]
[*][url=#]Support[i]arrow_outward[/i][/url]
[*][url=#]Community Code[/url]
[/list]


[*]
[url=#]Our Socials[i]arrow_drop_down[/i][/url]


[list]
[url=#]X[i]arrow_outward[/i][/url]
[*][url=#]Youtube[i]arrow_outward[/i][/url]
[*][url=#]Instagram[i]arrow_outward[/i][/url]
[*][url=#]Facebook[i]arrow_outward[/i][/url]
[*][url=#]Discord[i]arrow_outward[/i][/url]
[/list]


[*][url=#]Esports[i]arrow_outward[/i][/url]
[*]
[url=#]MORE[i]arrow_drop_down[/i][/url]


[list]

[/list]




[i]search[/i]
[i]

close[/i]


[i]language[/i]
Play Now

CSS:

Код: Выделить всё

header {
width: 100%;
background-color: rgb(24, 20, 20);
text-transform: uppercase;
position: fixed;
z-index: 2;
}

/* Header Icon Styles */
header i.material-icons {
color: gray;
font-size: 1.125rem;
vertical-align: middle;
}

nav {
display: flex;
align-items: center;
margin: 0 2.5%;
}

/* Riot Logo and valorant Logo Image */
.riot-logo img,
.valorant-logo img {
width: 100%;
height: auto;
}

/* Riot Logo Container */
.riot-logo {
width: 5em;
height: auto;
flex-shrink: 0;
display: flex;
align-items: center;
margin-right: 2.5em;
}

/* Hover Effects for Riot Logo */
.riot-logo img.logo-hover {
display: none;
}

.riot-logo:hover img.logo-hover {
display: block;
}

.riot-logo:hover img.logo-default {
display: none;
}

.riot-logo:hover i.material-icons {
color: rgb(247, 67, 67);
}

/* Valorant Logo Container */
.valorant-logo {
width: 1.7em;
height: 1.5em;
flex-shrink: 0;
margin-right: 2em;
}

/* Nav List */
.nav-list {
list-style-type: none;
display: flex;
font-size: 0.8rem;
font-weight: 600;
flex-shrink: 0;
margin: 0;
padding: 0;
align-items: center;
margin-right: auto;
}

.nav-list li a {
text-decoration: none;
padding: 0.8em 1em;
color: white;
letter-spacing: 1px;
}

.nav-list li {
padding: 2.5em 0;
margin-right: 1em;
}

/* Hover Effects for Nav List */
.nav-list > li > a:hover {
background-color: rgb(66, 60, 60);
color: rgb(247, 67, 67);
border-radius: 10px;
}

.nav-list > li:hover {
position: relative;
}

.nav-list > li:hover::after {
content: "";
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 4px;
background-color: rgb(247, 67, 67);
border-radius: 10px;
}

.nav-list li a:hover i.material-icons {
color: white;
}

/* Searchbar Styles */
.search-container {
display: flex;
align-items: center;
background-color: #312f2f;
border-radius: 15px;
transition: all 0.7s ease;
overflow: hidden;
width: 50px;
justify-content: flex-start;
margin-right: 0.5em;
flex-shrink: 0;
padding: 12px 0;
justify-self: end;
}

.search-container .search-icon {
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0 13px;
}

.search-input {
border: none;
outline: none;
color: white;
background-color: #312f2f;
font-size: 1rem;
}

.close-btn {
background: none;
border: none;
cursor: pointer;
padding: 0 13px 0 5px;
}

.close-btn .close {
color: gray;
font-size: 1.4rem;
}

.search-container.active {
width: 240px;
}

.search-container.active .search-input {
width: 100%;
opacity: 1;
}

/* Language Icon */
.material-icons.language {
color: white;
margin-right: 12px;
}

/* Play Now Button */
.play-now-btn {
text-decoration: none;
padding: 0.5em 1.2em;
background-color: rgb(247, 67, 67);
border-radius: 12px;
flex-shrink: 0;
font-size: 14px;
}

/* Dropdown Styles */
.dropdown-content i.material-icons {
font-size: 0.6rem;
vertical-align: top;
}

.dropdown-content {
display: none;
position: absolute;
background-color: rgb(54, 53, 53);
min-width: 200px;
z-index: 100;
border-radius: 5px;
margin-top: 23px;
}

.dropdown-top-border {
height: 4px;
background-color: rgb(247, 67, 67);
width: 100%;
border-radius: 2px 2px 0 0;
}

.dropdown-content ul {
padding: 1.2em;
}

.dropdown-content li {
list-style-type: none;
margin-right: 0;
padding: 0;
}

.nav-list li .dropdown-content a {
color: rgb(194, 189, 189);
padding: 1em 1em;
text-decoration: none;
display: block;
font-size: 0.8rem;
font-weight: 100;
border-radius: 5px;
}

.nav-list li .dropdown-content a:hover {
background-color: rgb(76, 73, 73);
color: white;
}

.nav-list li:hover .dropdown-content {
display: block;
}

/* Styling for "MORE" dropdown */
.more-dropdown {
display: none;
}

.more-dropdown .dropdown-content {
position: absolute;
background-color: rgb(54, 53, 53);
min-width: 150px;
z-index: 100;
border-radius: 5px;
margin-top: 23px;
}

.more-dropdown .dropdown-content ul {
padding: 1em;
}

.more-dropdown .dropdown-content ul li {
list-style-type: none;
padding: 0.5em 0;
display: block;
}

.more-dropdown .dropdown-content ul li a {
color: rgb(194, 189, 189);
text-decoration: none;
display: block;
font-size: 0.8rem;
border-radius: 5px;
}

.more-dropdown .dropdown-content ul li a:hover {
background-color: rgb(76, 73, 73);
color: white;
}

JS:

Код: Выделить всё

const nav = document.querySelector('nav');
const navList = document.querySelector('.nav-list');
const moreDropdown = document.querySelector('.more-dropdown');
const moreList = document.querySelector('.more-list');
const searchContainer = document.querySelector('.search-container');
const searchIcon = document.querySelector('.search-icon');
const closeButton = document.querySelector('.close-btn');
const searchInput = document.querySelector('.search-input');

// Function to adjust nav items
function adjustNavItems() {
// Move items back from "MORE" dropdown to navList
moreDropdown.style.display = 'none';
while (moreList.firstChild) {
navList.insertBefore(moreList.firstChild, moreDropdown);
}

// Shift items to "MORE" if nav overflows
while (nav.scrollWidth > nav.clientWidth ) {
moreDropdown.style.display = 'inline-block';
moreList.insertBefore(navList.children[navList.children.length - 2], moreList.firstChild);
}
}

// Event listeners
window.addEventListener('resize', adjustNavItems);
window.addEventListener('load', adjustNavItems);

searchIcon.addEventListener('click', () => {
searchContainer.classList.add('active');
searchInput.focus();

});

closeButton.addEventListener('click', () => {
searchContainer.classList.remove('active');
searchInput.value = ""; // Clear the input field

});

Примечание. Используйте только HTML, CSS и JS.

Подробнее здесь: https://stackoverflow.com/questions/791 ... orant-site