Привет, я учусь и пытаюсь сделать мой сайт мобильным, и независимо от того, что я пытаюсь, мне не повезло. Поэтому я попробовал несколько способов превратить меню в мобильное меню при изменении размера. Я также пытался заставить контент центрироваться правильно, когда на маленьком экране. Я много гуглил и работал больше всего, теперь мне просто нужна помощь, чтобы завершить его правильно.
Редактировать: Обновлен код в соответствии с запросом @ { ссылка }
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* Main Body */
body {
background-image: url(Image/footballField.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100hv;
min-width: 100hv;
background-size: 100% 100%;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black
}
/*Header with logo*/
#header {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
#container1 {
position: relative;
background-color: #FFFFFF;
position: absolute;
min-height: 100vh;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-bottom:120px;
}
/* footer for all pages */
#footer {
position: absolute;
clear: both;
color: white;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 300;
bottom: 0;
background: linear-gradient(to bottom, #C61618 5%, black 100%);
width: 100%;
height: 100px; /* Footer height */
}
.fa-facebook {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
background: #3B5998;
color: white;
margin-right: 50px;
border-radius: 30%;
} /* Facebook Icon and link in Footer */
* {
box-sizing: border-box;
}
/*Search Field */
input:focus,
textarea:focus,
select:focus {
outline-color: #C61618;
}/* Search Area on Header */
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
float: right;
width: 20%;
background: white;
margin-right: 5%;
} /* Style the search field from W3Schools*/
form.search button {
float: right;
width: 5%;
padding: 10px;
background: #C61618;
color: white;
font-size: 17px;
border: 1px solid black;
border-right: none;
/* Prevent double borders */
cursor: pointer;
} /* Style the submit button from W3Schools */
form.search button:hover {
background: #C61618;
} /* Search button hover */
form.search::after {
content: "";
clear: both;
display: table;
} /* Clear floats on Search from W3Schools */
/*Nav Bar*/
#navbar {
position: relative;
margin-top: 40px;
margin-right: 5%;
margin-left: 8%;
}/*Main White Background*/
li a {
display: inline;
text-decoration: none;
color: white;
font-size: 16px;
} /*link look on Nav Bar */
#navbar ul li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
border-radius: 30px; /*curved corners on buttons*/
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /*Menu look*/
#navbar ul li:hover {
background: black;
} /*Menu hover Colour*/
#navbar .btn.active {
background: black;
} /*Menu active Colour*/
/* Text Styling */
p,
h2,
a {
text-decoration: none;
color: black;
} /*all paragraph text*/
h1 {
text-align: center;
margin-top: 5%;
}/*position of h1*/
h2 {
text-align: center;
margin-top: 5%;
text-decoration: none;
color: black;
} /*position of h2*/
h4 a {
text-decoration: none;
color: black;
}
p {
margin-left: 50px;
margin-right: 50px;
text-align: justify-all;
line-height: 150%;
} /*format text <p> */
/*Index Page*/
#image_index {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
max-width: 30%
} /* Image on home page format */
#image_contact {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
} /* Image on home page format */
#index_table {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
} /* Table Index Page format */
/*Competitions Page */
table.c {
table-layout: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.competition_table p {
text-align: center;
margin-left: auto;
margin-right: auto;
}/* format for <p> Competitions Page */
th {
text-emphasis: bold;
font-size: 20px;
height: 10px;
background-color: lightgrey;
border-color: black;
} /* Table Header*/
table,
th,
td {
padding: 10px;
border-style: solid;
border-color: black;
border-width: thin;
border-collapse: collapse;
}
/* Contact Us Page */
#secretary {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
}
.column1 {
float: left;
width: 40%;
padding: 10px;
}
.right {
width: 75%;
}
.row:after {
/* Clear floats after the columns */
content: "";
display: table;
clear: both;
}
#contact_form {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
width: 50%;
}
* {
box-sizing: border-box;
} /*format for Contact Us form*/
input[type=text],
[type=email],
[type=tel],
select,
textarea,
email {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
} /*format for Contact Us form*/
label {
padding: 12px 12px 12px 0;
display: inline-block;
} /*format for Contact Us form*/
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 20px;
font-weight: bold;
} /*format for Contact Us form*/
input[type=submit]:hover {
background-color: #C61618;
} /*format for Contact Us form*/
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/*Merch Page*/
.merch_order_form {
clear:both;
text-align: left;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
padding:10px;
}
.col-50 {
float: left;
width: 40%;
margin-left: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.col-45 {
float: right;
width: 40%;
margin-right: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.row:after {
content: "";
display: table;
clear: both;
} /* Clear floats after the columns */
input[type=submit_merch] {
background-color: black;
color: white;
text-align: center;
padding: 12px 20px;
font-size: 30px;
border-radius: 30px;
cursor: pointer;
margin-left: 30%;
margin-top: 10px;
} /* Merch Page Submit Button */
input[type=submit_merch]:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /* Merch Page hover change */
#subject {
font-size: 16px;
}
/* Registration Page Submit Button */
.myButton {
box-shadow: inset 0px 0px 0px 2px #0154FA;
background: linear-gradient(to bottom, #0154FA 5%, #283966 100%);
background-color: #0154FA;
border-radius: 30px;
border: 1px solid #4e6096;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 28px;
font-weight: bold;
padding: 21px 76px;
text-decoration: none;
text-shadow: 0px 0px 0px #283966;
text-align: center;
margin-left: 35%;
margin-right: auto;
margin-bottom: 70px;
} /* Merch Page Registration Button */
.myButton:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
background-color: #C61618;
border: 1px solid #C61618;
box-shadow: inset 0px 0px 0px 2px #C61618;
} /* Merch Page Registration Button */
.myButton:active {
position: relative;
top: 1px;
} /* Merch Page Registration Button */
@media screen and (min-width: 800px) {
.column {
width: 100%;
background-image: disabled;
.navbar li, .navbar li a:last-child {
display: none !important;
visibility: hidden !important;
}
}
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
background-image: disabled;
.mobile_navbar li, .mobile_navbar li:last-child {
display: none !important;
visibility: hidden !important;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black;
text-align: right;
}
.col-25,
.col-75,
.col-50,
.col-45,
input[type=submit] input [type=submit_merch] {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
#body {
background-color: white;
margin: 0px;
}
}
#container1 {
margin="0px";
background-color: ="white";
}
#mobile_navbar {
display:flex;
margin-left: 100px;
display: inline;
}
.mobile-container {
min-width: 370px;
margin: auto;
padding: auto;
background-color: white;
height: 500px;
color: black;
border-radius: 10px;
}
/* TopNav Menu Code from W3Schools.com Dropdown Button */
.dropbtn {
background-color: #C61618;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #C61618}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
Вот как это выглядит, когда я складываю все это вместе. И меню, и столбцы не складываются.