I am asking if someone could help me change this medium length CSS code to have a min-width media query instead of max-width, when I try changing it, I get confused throughout the process as it is not mine, I just edited it. Also I attached the HTML code which corresponds to the CSS.
Thank you in advance!
#logo { color: #E4E4EC; font-size: 50px; line-height: 100px; margin-left: 54px; font-weight: 700; } nav ul { float: right; margin-right: 20px; margin-top: 20px; } nav ul li { display: inline-block; line-height: 60px; margin: 0 5px; } nav ul li a { color: #E4E4EC; background-color: #4A2285; border-radius: 13px; font-size: 17px; margin-right: 34px; margin-left: 10px; padding: 3px 25px; text-transform: uppercase; } a.active, a.hover_a:hover { background: #E4E4EC; border-radius: 13px; color: #4a2285; transition: .5s; }.checkbtn { color: #E4E4EC; float: right; margin-top: 20px; margin-right: 20px; cursor: pointer; display: none; }.hamburger { width: 38px; height: 28px; } #check { display: none; } @media (max-width: 1100px) { #logo { font-size: 30px; line-height: 100px; margin-left: 20px; font-weight: 700; } nav ul li a { font-size: 16px; margin-right: 0px; } } @media (max-width: 858px) { #logo { font-size: 20px; line-height: 70px; margin-left: 20px; font-weight: 700; }.checkbtn { display: block; } ul { position: fixed; background: #201449; background-image: url(../images/menu.jpg); background-position: top left; background-size: cover; opacity: 1; width: 76vw; height: 100%; top: -20px; left: -100%; text-align: left; transition: all.5s; border-radius: 0px 20px 20px 0px; z-index: 999; } nav ul li { display: block; margin-top: 45vw; margin-bottom: -45vw; text-align: left; text-transform: lowercase; font-weight: 700; } nav ul li a { font-size: 9.5vw; border-radius: 0px; background: none; color: #e4e4ec; float: none; margin: 0; } a.hover_a:hover, a.active { border-radius: 0; background: none; color: #381f84; transition: .5s; } #check:checked ~ ul { left: 0; } }
<nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"><img src="images/menu.png" class="hamburger" alt="hamburger"> </label> <a href="index.html" id="logo"> LOGO </a> <ul> <li><a class="active buttons hover_a" href=""><b>HOME</b></a></li> <li><a href="" class="buttons hover_a"><b>GALLERY</b></a></li> <li><a href="" class="buttons hover_a"><b>INFORMATION</b></a></li> <li><a href="" class="buttons hover_a"><b>CONTACT</b></a></li> </ul> </nav>
Honestly, I don't know exactly how you wanted it, but I did it on my own. If there are additional requests, then tell me about them, and I will correct or finalize. Most importantly, your decision is based on the float
rules.
Never use these float
rules!
#logo { font-size: 30px; line-height: 100px; margin-left: 20px; font-weight: 700; } nav ul { /*float: right;*/ margin-right: 20px; margin-top: 20px; } nav ul li { display: inline-block; line-height: 60px; margin: 0 5px; } nav ul li a { color: #E4E4EC; background-color: #4A2285; border-radius: 13px; font-size: 17px; margin-right: 34px; margin-left: 10px; padding: 3px 25px; text-transform: uppercase; } a.active, a.hover_a:hover { background: #E4E4EC; border-radius: 13px; color: #4a2285; transition: .5s; }.checkbtn { color: #E4E4EC; float: right; margin-top: 20px; margin-right: 20px; cursor: pointer; display: none; }.hamburger { width: 38px; height: 28px; } #check { display: none; } @media (min-width: 1100px) { #logo { color: #E4E4EC; font-size: 50px; line-height: 100px; margin-left: 54px; font-weight: 700; } nav ul li a { font-size: 16px; margin-right: 0px; } } @media (min-width: 858px) { /*#logo { font-size: 20px; line-height: 70px; margin-left: 20px; font-weight: 700; }*/.checkbtn { display: block; } ul { position: absolute; background: #201449; background-image: url(../images/menu.jpg); background-position: top left; background-size: cover; opacity: 1; /*width: 76vw;*/ height: 100vh; top: -20px; left: -100%; text-align: left; transition: all.5s; border-radius: 0px 20px 20px 0px; z-index: 999; } nav ul li { display: block; /*margin-top: 45vw; margin-bottom: -45vw;*/ text-align: left; text-transform: lowercase; font-weight: 700; } nav ul li a { /*font-size: 9.5vw;*/ border-radius: 0px; background: none; color: #e4e4ec; /*float: none;*/ margin: 0; } a.hover_a:hover, a.active { border-radius: 0; background: none; color: #381f84; transition: .5s; } #check:checked ~ ul { left: 0; } }
<nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"><img src="images/menu.png" class="hamburger" alt="hamburger"> </label> <a href="index.html" id="logo"> LOGO </a> <ul> <li><a class="active buttons hover_a" href=""><b>HOME</b></a></li> <li><a href="" class="buttons hover_a"><b>GALLERY</b></a></li> <li><a href="" class="buttons hover_a"><b>INFORMATION</b></a></li> <li><a href="" class="buttons hover_a"><b>CONTACT</b></a></li> </ul> </nav>
I couldn't change the second media query (as that had to be a maximum and couldn't be a minimum). However, if you were wondering what your code would look like with the first media parameter being a minimum (and don't mind the screen oversizing), then this should do it:
#logo {
color: #E4E4EC;
font-size: 50px;
line-height: 100px;
margin-left: 54px;
font-weight: 700;
}
nav ul {
float: right;
margin-right: 20px;
margin-top: 20px;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin: 0 5px;
}
nav ul li a {
color: #E4E4EC;
background-color: #4A2285;
border-radius: 13px;
font-size: 17px;
margin-right: 34px;
margin-left: 10px;
padding: 3px 25px;
text-transform: uppercase;
}
a.active,
a.hover_a:hover {
background: #E4E4EC;
border-radius: 13px;
color: #4a2285;
transition: .5s;
}
.checkbtn {
color: #E4E4EC;
float: right;
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
display: none;
}
.hamburger {
width: 38px;
height: 28px;
}
#check {
display: none;
}
@media (max-width: 1100px) {
#logo {
// Configure your maximum media query here
}
@media (min-width: 859px) {
#logo {
font-size: 30px;
line-height: 100px;
margin-left: 20px;
font-weight: 700;
// Media query that changed
}
nav ul li a {
font-size: 16px;
margin-right: 0px;
}
}
@media (max-width: 858px) {
#logo {
font-size: 20px;
line-height: 70px;
margin-left: 20px;
font-weight: 700;
}
.checkbtn {
display: block;
}
ul {
position: fixed;
background: #201449;
background-image: url(../images/menu.jpg);
background-position: top left;
background-size: cover;
opacity: 1;
width: 76vw;
height: 100%;
top: -20px;
left: -100%;
text-align: left;
transition: all .5s;
border-radius: 0px 20px 20px 0px;
z-index: 999;
}
nav ul li {
display: block;
margin-top: 45vw;
margin-bottom: -45vw;
text-align: left;
text-transform: lowercase;
font-weight: 700;
}
nav ul li a {
font-size: 9.5vw;
border-radius: 0px;
background: none;
color: #e4e4ec;
float: none;
margin: 0;
}
a.hover_a:hover,
a.active {
border-radius: 0;
background: none;
color: #381f84;
transition: .5s;
}
#check:checked ~ ul {
left: 0;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.