Display property

HTML-CSS
1

i have been trying to hide the ul menu after the input tpye is dropped but the menu still shows
.header {
display: flex;
justify-content: space-between;
align-items: center;
}

.search_box {
flex: 1;
text-align: center;
position: relative;
}

.search_box button {
background: url(‘search.png’) no-repeat center center;
background-size: contain;
width: 30px; /* Adjust the width as needed /
height: 30px; / Adjust the height as needed */
border: none;
cursor: pointer;

}

.search_boxInput {
font-size: 24px;
line-height: 1.1666666667;
font-weight: 600;
letter-spacing: .009em;
font-family: ‘SF Pro Display’, ‘SF Pro Icons’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
position: relative;
z-index: 1;
margin-inline-start: -30px;
margin-inline-end: -31px;
padding-inline-start: 34px;
padding-inline-end: 34px;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: transparent;
border: none;
border-radius: 0;
color: whitesmoke;
line-height: 1;
transition: 0.5s;
}
.search_dropdown_content {
display: none;

}

/* Add this style to show the input when ‘open’ class is present */
.search_box.open .search_dropdown_content {
display: flex;
align-items: center;
}
.search_box.open .search_button {
display: none;
}

/* Hide menu items when search box is open */
.search_box.open .navbar li {
display: none;
}

@media only screen and (max-width: 833px) {
.search_boxInput {
font-size: 28px;
line-height: 1.1428571429;
font-weight: 600;
letter-spacing: .007em;
}
}

.navbar {
background-color: #333; /* Add your desired background color /
color: #fff; / Add your desired text color */
padding: 10px 0;
}

.main-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

.main-menu li {
margin-right: 20px;
}

.main-menu a {
text-decoration: none;
color: inherit;
font-weight: bold;
font-size: 16px;
}

.main-menu a:hover {
color: #ffcc00; /* Add your desired hover color */
}

.accountOption-content {
display: none;
position: absolute;
background-color: #333; /* Add your desired background color */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
padding: 10px;
z-index: 1;
}

.accountOption:hover .accountOption-content {
display: block;
}
.accountOption {
position: relative;
margin-right: 20px;
}

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.