@media only screen and (max-width: 960px) {
.flexslider {
margin-top: 100px;
}
.main-header {
padding: 15px 0;
}
.main-header .logo {
margin-top: 20px;
}
.service-item, .team-member {
margin-bottom: 50px;
}
.our-skills {
margin-top: 60px;
}
.flex-caption {
top: 20%;
}
.flex-caption h2 {
font-size: 24px;
margin-bottom: 20px;
}
.flex-caption p {
font-size: 14px;
width: 70%;
margin: 0 auto;
}
.left-header, .right-header {
text-align: center;
}
}
I need help with the mobile display of my 'main-header' and 'body header'. The responsive menu nav bar and company logo in the main-header container are not resizing correctly on tablet and mobile screens. This causes overlap between the navigation links and the logo when viewed on tablets, and the three-line navigation bar appears off-screen on mobile devices. Additionally, clicking on the three-line nav bar does not reveal the navigation links. Furthermore, the St. Vincent de Paul company logo (.png) is not resizing for mobile screens, resulting in layout issues with the body header links. I'm seeking assistance to fix these mobile display problems. Website URL: www.svdpplymouth.org - Thank you!
.top-header {
background: #191970;
color: white;
padding: 10px 0;
z-index: 1000
}
.top-header .left-header span {
display: inline-block;
margin: 8px 20px 0 0;
}
...
<nav>
...
</header></div>