On a web page on the mobile device, the navigation bar extends to the right. This causes that on the screen we can scroll even though the right part is without content. In this case, it looks empty, leaving a gap, and reaching the top, you see the navigation bar extended to the right. However, it should not be scrollable.
What am I doing wrong to make the bar extend causing that gap?
I leave the code, to see if it is enough to see my errors.
The website in question is agrochema.es and see the error it has, both on the main page and on the price page.
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('http://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');
* {
padding: 0;
margin: 0;
}
#logo {
padding: 0;
margin: 0;
width: 80px;
height: 80px;
margin: -0.6em 0;
}
#contact {
height: 150px;
}
html nav.navbar.navbar-custom {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
font-family: 'Ek Mukta', sans-serif;
font-weight: 300;
color: #666;
background-color: #fff;
font-size: 16px;
line-height: 1.6em;
font-weight: 400;
overflow-x: hidden;
}
html {
width: 100%;
height: 100%;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 20px;
}
h1,
h2,
h4,
h5,
h6 {
margin: 0 0 30px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #111;
}
h3 {
margin: 0 0 30px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #008000 !important;
}
h1.h-xlight,
h2.h-xlight,
h3.h-xlight,
h4.h-xlight,
h5.h-xlight,
h6.h-xlight {
font-weight: 200;
}
h1.h-light,
h2.h-light,
h3.h-light,
h4.h-light,
h5.h-light,
h6.h-light {
font-weight: 300;
}
h1.h-bold,
h2.h-bold,
h3.h-bold,
h4.h-bold,
h5.h-bold,
h6.h-bold {
font-weight: 600;
}
h1.font-light,
h2.font-light,
h3.font-light,
h4.font-light,
h5.font-light,
h6.font-light {
color: #fff;
}
.big-heading {
font-size: 48px;
font-weight: 700;
}
p {
margin: 0 0 10px;
}
.text-center {
font-size: 20px;
}
.service-desc p {
font-size: 16px;
}
p.lead {
font-weight: 600;
}
.highlight-light {
background-color: rgba(255, 255, 255, .5);
padding: 20px;
display: inline-block;
color: #111;
}
a {
color: #666;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
}
.light {
font-weight: 400;
}
.site-logo {
display: flex;
}
#navigation {
background: #fff;
z-index: 9999;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #eee;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
/* codigo de Alvaro Montoro */
div#navigation-sticky-wrapper {
position: relative;
z-index: 121;
}
.navbar {
margin-bottom: 0;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.nav.navbar-nav {
background-color: rgba(255, 255, 255, .6);
}
.navbar-custom.top-nav-collapse .nav.navbar-nav {
background-color: rgba(0, 0, 0, 0);
}
.navbar-custom ul.nav li a {
font-size: 16px;
letter-spacing: 1px;
color: #444;
text-transform: uppercase;
font-weight: 700;
}
.navbar-custom.top-nav-collapse ul.nav li a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #fff;
}
.navbar-custom ul.nav ul.dropdown-menu {
border-radius: 0;
margin-top: 21px;
border-top: none;
}
.navbar-custom ul.nav li a:hover ul.dropdown-menu {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #f5f5f5;
}
.navbar-custom ul.nav ul.dropdown-menu li:last-child {
border-bottom: none;
}
.navbar-custom ul.nav ul.dropdown-menu li a {
padding: 10px 20px;
}
.navbar-custom ul.nav ul.dropdown-menu li a:hover {
background: #fefefe;
}
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
color: #666;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255, 255, 255, .2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255, 255, 255, .2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 14px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}
.divider-header {
display: block;
width: 40px;
height: 2px;
margin: 0 auto;
margin-bottom: 10px;
}
.divider-short {
display: block;
width: 60px;
height: 5px;
margin: 0 auto;
margin-bottom: 10px;
}
@media (max-width:480px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255, 255, 255, .4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
}
.navbar .navbar-custom {
padding: 0;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
@media (max-width:768px) {
#navigation {
padding: 20px 0;
}
.site-logo {
margin: 0 0 0 30px;
float: none;
}
.navbar-custom ul.nav li a {
color: #eee;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #aaa;
}
.navbar-header {
margin-top: -40px;
padding: 0;
}
.navbar-header button {
background: #111;
}
.navbar-header button.navbar-toggle {
padding: 4px 15px;
font-size: 14px;
color: #fff;
}
.navbar-custom .nav {
background: #444;
}
.service-box {
margin-bottom: 50px;
}
.team-wrap {
margin-bottom: 30px;
}
.xs-marginbot-20 {
margin-bottom: 20px;
}
}
.marginbot-0 {
margin-bottom: 0 !important;
}
.marginbot-10 {
margin-bottom: 10px !important;
}
.marginbot-20 {
margin-bottom: 20px !important;
}
.marginbot-30 {
margin-bottom: 30px !important;
}
.marginbot-40 {
margin-bottom: 40px !important;
}
.marginbot-50 {
margin-bottom: 50px !important;
}
.marginbot-60 {
margin-bottom: 60px !important;
}
.marginbot-70 {
margin-bottom: 70px !important;
}
.marginbot-80 {
margin-bottom: 80px !important;
}
.marginbot-90 {
margin-bottom: 90px !important;
}
.marginbot-100 {
margin-bottom: 100px !important;
}
.margintop-0 {
margin-top: 0 !important;
}
.margintop-10 {
margin-top: 10px !important;
}
.margintop-20 {
margin-top: 20px !important;
}
.margintop-30 {
margin-top: 30px !important;
}
.margintop-40 {
margin-top: 40px !important;
}
.margintop-45 {
margin-top: 45px !important;
}
.margintop-50 {
margin-top: 50px !important;
}
#container-2 {
background-color: #EBB250;
}
.home-section {
padding-top: 20px;
padding-bottom: 20px;
display: block;
position: relative;
z-index: 120;
}
.home-section2 {
padding-top: 0px;
padding-bottom: 20px;
display: block;
position: relative;
z-index: 120;
}
.inner-section {
padding-top: 110px;
padding-bottom: 110px;
}
.home-section.nopadd-bot {
padding-bottom: 0;
}
.section-heading h2 {
font-size: 24px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}
.section-heading p {
font-weight: 300;
font-size: 20px;
line-height: 1.6em;
}
.color-dark .section-heading h2 {
color: #111;
}
.color-dark .section-heading p {
color: #444;
}
.color-dark .divider-short {
background: #666;
}
.color-dark .divider-header {
background: #666;
}
.color-light .divider-short {
background: #666;
}
.color-light .divider-header {
background: #666;
}
.color-light .section-heading h2 {
color: #fff;
}
.color-light .section-heading p {
color: #fefefe;
}
.color-light blockquote,
.color-light p {
color: #fefefe;
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #f9f9f9;
}
.bg-dark {
background: #404040;
}
.text-light {
color: #fff;
}
.hero {
background: url(http://i41.tinypic.com/350t8nr.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 200px 0 200px 0;
height: auto;
}
.hero h1 {
font-size: 40px;
letter-spacing: 12px;
margin: 40px 0 10px;
font-weight: 900;
color: #fff;
}
.hero h1 span {
color: #a1a9b0;
display: inline-block;
}
.hero p {
font-size: 24px;
font-weight: 400;
color: #fefefe;
}
.learn-more-btn {
background: rgba(61, 201, 179, 1);
padding: 20px 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
-webkit-box-shadow: 0px 3px 0px 0px #309383;
-moz-box-shadow: 0px 3px 0px 0px #309383;
box-shadow: 0px 3px 0px 0px #309383;
margin: 60px 0 0;
font-weight: bold;
}
.learn-more-btn:hover,
.learn-more-btn:focus {
background: rgba(61, 201, 179, 0.6);
color: #fff;
}
.intro {
width: 100%;
position: relative;
padding: 0;
}
.intro-inner {
width: 100%;
position: relative;
padding: 120px 0 20px;
}
.brand-heading {
font-size: 40px;
}
.intro-text {
font-size: 18px;
}
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.header-text h2 {
font-size: 40px;
}
.header-text h2 span {
padding: 10px;
color: #fff;
text-transform: uppercase;
}
.header-text h3 span {
color: #fff;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}
.service-desc .divider-header {
margin-bottom: 30px;
}
.item {
margin: 10px;
}
.item img {
display: block;
width: 100%;
height: auto;
}
#contact {
background-color: #C9E4E4;
}
.btn-lg,
.btn-group-lg>.btn {
border-radius: 2px;
}
.widget-contact {
text-align: left;
}
.boxcol-25 {
width: 100%;
}
.sidebar .widget h5 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.sidebar .widget {
margin-bottom: 50px;
}
.widget ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
.widget.widget_categories ul li:before {
display: inline-block;
font-family: 'Pe-icon-7-stroke';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e684";
margin-right: 10px;
}
.widget.widget_recent_post ul li figure {
float: left;
margin: 0 20px 0 0;
}
.widget.widget_recent_post ul li {
margin-bottom: 25px;
}
.widget.widget_recent_post ul li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.widget.widget_recent_post ul li h6 {
margin-bottom: 10px;
}
.widget.widget_recent_post ul li span {
font-size: 14px;
}
.widget .tagcloud a {
padding: 4px 10px;
color: #fff;
display: inline-block;
margin: 0 10px 10px 0;
font-size: 14px;
border-radius: 2px;
}
.widget .tagcloud a:hover {
color: #fff;
background: #333;
}
.btn {
border-radius: 2px;
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
font-size: 14px;
}
.btn.btn-noradius {
border-radius: 0;
}
a.btn:focus {
outline: 0;
}
.btn-red {
color: #fff;
background-color: #c83539;
border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
color: #fff;
background-color: #666;
border-color: #666;
}
.btn-red:active {
background-image: none;
}
.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
color: #fff;
background-color: #666;
border-color: #666;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #28c3ab;
outline: 0;
color: #000;
background-color: #28c3ab;
}
.btn-huge {
padding: 25px;
font-size: 26px;
}
.banner-social-buttons {
margin-top: 0;
}
.progress {
height: 40px;
}
.progress-bar {
font-size: 14px;
line-height: 40px;
}
.intro {
height: 100%;
padding: 0;
}
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 25px;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agrochema</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<section class="hero" id="intro">
<div class="container">
<div class="row">
<div class="col-md-12 text-right navicon">
<a id="nav-toggle" class="nav_slide_button" href="#">
<span></span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center inner">
<div class="animatedParent">
<h1 class="animated fadeInDown">Servicio </h1>
<p class="animated fadeInUp">Desbrozamos.</p>
</div>
</div>
</div>
</div>
</section>
<div id="navigation">
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="site-logo">
<img id="logo" src="img/logo.png" />
</div>
</div>
<div class="col-md-10">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#intro">Casa</a>
</li>
<li>
<a href="#about">Sobre mi</a>
</li>
<li>
<a href="#service">Servicios</a>
</li>
<li>
<a href="galerias.html">Trabajos</a>
</li>
<li>
<a href="#service">Ser</a>
</li>
<li>
<a href="galerias.html">Trabajos</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<section id="about" class="home-section color-dark bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="animatedParent">
<div class="section-heading text-center animated bounceInDown">
<h2 class="h-bold">¿.?</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 animatedParent">
<div class="text-center">
<p>Realizamos</p>
<a href="#" class="btn btn-skin btn-scroll">Mas </a>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="home-section color-dark bg-gray">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="section-heading text-center">
<h2 class="h-bold">¿Què ?</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<div class="container">
<div class="row animatedParent">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="animated rotateInDownLeft">
<div class="service-box">
<img src="http://i41.tinypic.com/350t8nr.jpg">
<div class="service-desc">
<p> Desbrozamos</p>
</div>
</div>
</div>
</div>
<div class="animated rotateInDownRight slower">
<div class="service-box">
<div class="service-desc">
<img src="http://i41.tinypic.com/350t8nr.jpg">
<p>Venta</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
El problema parece estar con las animaciones que tienes (aunque no he conseguido identificar cuál de ellas en particular pero podría ser por los estilos del
fadeIn
). Inicialmente los elementos quedan fuera de la pantalla y los animas para que aparezcan en pantalla, pero se hace usando transformaciones y parece que a algunos navegadores no termina de gustarles.Sé que es una solución algo "bruta", pero el problema desaparece haciendo que todo lo que esté fuera del ancho esté oculto. Para eso sólo tienes que añadir:
Lo que te voy a proponer no es realmente una solución; puesto que no hemos encontrado exáctamente la causa. Sin embargo, he hecho unos tests y sí que parece funcionar sin problemas.
Yo he metido ésta linea en el bloque de CSS de
html
directamente; pero quizá sea más prudente supeditarlo a una media query apropiada.Try putting this meta in the head of the html: