The navbar of my website gets extended to the right side on mobile:
Screenshot: https://prnt.sc/qsze7o - navbar https://prnt.sc/qszeer - footer
I updated my CSS with the following code to make it responsive:
html{overflow-x:hidden;}
body{overflow-x:hidden;}
It works and fixes the navbar for mobile devices but it hides the first row of the footer as shown below. Please suggest any solution.
Screenshot After https://prnt.sc/qszelc - navbar https://prnt.sc/qszeow - footer
Header.js
<HeaderWrapper>
<div className="container-fluid">
<div className="row">
<div className="col-md-2">
<Link to="/">
<img src={tangoLogo} alt={site.siteMetadata.title} />
</Link>
</div>
<div className="col-md-10 menu">
<Navigation menu={menu} />
</div>
</div>
</div>
</HeaderWrapper>
HeaderStyles.js
import styled from 'styled-components';
export const HeaderWrapper = styled.header`
background: #fff;
margin-bottom: 1.45rem;
height: 110px;
border-bottom: 1px solid #e7e7e7;
display: flex;
align-items: center;
position: fixed;
z-index: 999;
width: 100%;
-webkit-box-shadow: 0 5px 4px -6px #999;
-moz-box-shadow: 0 5px 4px -6px #999;
box-shadow: 0 7px 4px -8px #999;
@media (min-width: 1200px) {
img {
margin:170px!important;
}
}
img {
max-width: 185px;
margin: 0;
padding: 12px 0 0 0;
}
.menu {
display: flex;
align-items: center;
}
`;
Above code is for the header section.
Footer.js
<div className="row">
<div className="col-md-4"
data-sal="slide-left"
data-sal-delay="300"
data-sal-duration="60s"
data-sal-easing="ease">
<h3>PROFESSIONAL ASSISTANCE</h3>
<p className="expat-contact">Expat Guide Turkey is entity working under structure of ATA Institutional Consultancy. <br/><br/>Expat Guide Turkey is a consultancy firm offering umbrella company services and services on immigration issues including work and residence permit, company formation and property management for foreigners in Turkey. Behind its success, Ata Institutional Consultancy’s efficiency and customer oriented management style plays a very important role. </p>
</div>
<div className="col-md-1"><br/></div>
<div className="col-md-7"
data-sal="slide-left"
data-sal-delay="400"
data-sal-duration="60s"
data-sal-easing="ease">
<h3>GET IN TOUCH</h3>
<form
name="contact"
method="POST"
action="/success/"
data-netlify="true"
data-netlify-honeypot="bot-field"
class="needs-validation"
novalidate netlify
>
<div className="half left cf">
<input type="hidden" name="form-name" value="contact" />
<input type="text" name="name" id="input-name" class="form-control" placeholder="Your Name" required />
<input type="email" name="email" id="input-email" class="form-control" placeholder="Email address" title="Email (format: your@example.com)" required />
<div className="invalid-feedback">
Please enter a valid email address.
</div>
<input id="phonenum" type="tel" class="form-control" pattern="^\d{4}-\d{3}-\d{4}$" placeholder="Phone Number (xxxx-xxx-xxxx)" title="Phone (format: xxxx-xxx-xxxx)" required />
</div>
<div className="half right cf">
<textarea name="message" id="input-message" rows="4" class="form-control" placeholder="Message"></textarea>
</div>
<div netlify-recaptcha></div>
<input
type='submit' id="input-submit" class="btn btn-primary btn-lg btn-block" value="Send Message"
/>
</form>
</div>
</div>
</div>
FooterStyles.js
import styled from 'styled-components';
export const FooterWrapper = styled.footer`
background: #f3f3f3;
color: #4c4c4c;
text-align: left;
padding: 40px 0 10px 0;
h1 {
font-family: 'Raleway', Arial;
color: #4c4c4c;
text-align: left;
font-size: 25px;
margin-left: 0px;
}
h3 {
font-family: 'Raleway', Arial;
font-size: 16px;
margin-top: 5px;
font-weight: 700;
margin-bottom: 10px;
line-height: 0.9rem;
}
h6 {
font-family: 'Times New Roman';
font-size: 28px;
color: #fff;
font-style: italic;
margin: 40px 20% 20px 20%;
line-height: 35px;
}
h6:before{
content: "";
background: #d22e;
width: 40px;
height: 4px;
position: absolute;
bottom: 10px;
}
a {
text-decoration: none;
color: #d22e;
font-weight: 200;
font-family: Arial, Helvetica, sans-serif;
}
.icon_social {
text-decoration: none;
display: inline-block;
margin: 0.6rem 1.2rem 1rem 0;
opacity: 0.5;
width: 1.4rem;
height: 1.4rem;
}
.social {
text-align: left;
display: block;
margin: 5px 0px;
}
.social img {
width: 1.2rem;
height: auto;
margin: 0 5px 0 0;
position: relative;
align-items: left;
opacity: 0.5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
filter: invert(60%) sepia(33%) saturate(2000%) hue-rotate(322deg) brightness(100%) contrast(120%);
}
.expat-contact {
font-size: 12px;
font-weight: 400;
font-family: Raleway, Arial;
line-height: 1.2rem;
}
.expat-heading {
font-size: 25px;
font-family: Raleway, Arial;
line-height: 1rem;
text-align: left;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
}
.expat-heading:before{
content: "";
background: #d22e;
width: 40px;
height: 4px;
position: absolute;
bottom: 6px;
}
.social img:hover {
opacity: 0.9;
cursor: pointer;
}
.linkedin {
margin-right: 5px;
filter: invert(36%) sepia(73%) saturate(2157%) hue-rotate(344deg) brightness(77%) contrast(99%);
-webkit-filter:invert(60%);
}
.facebook {
margin-left: 5px;
filter: invert(60%);
-webkit-filter:invert(60%);
}
.instagram {
margin-left: 5px;
filter: invert(60%);
-webkit-filter:invert(60%);
}
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.border-top-gray { border-top-color: #adb5bd; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.lh-condensed { line-height: 1.25; }
`;
Above row in the footer hides in mobile view if I use html,body{overflow-x:hidden} in my layout.css
The problem created by the following code inside Footer.js, where i was using slide-left css animation:
<div className="col-md-4"
data-sal="slide-left"
data-sal-delay="300"
data-sal-duration="60s"
data-sal-easing="ease">
</div>
After changing it to slide-up, the issue resolved and the header bar on mobile devices didn't extended towards right side:
<div className="col-md-4"
data-sal="slide-up"
data-sal-delay="300"
data-sal-duration="60s"
data-sal-easing="ease">
</div>