Hola tengo problemas con mi web en dispositivos móviles, la cosa que el botón de enlaces en una pagina me sale a la izquierda y en otra sale a la derecha. Pero el texto que se muestra al pulsar el botón de los enlaces es apenas reconocible, Tengo el siguiente código y no consigo que se vean las palabras de enlace negras. ¿ Que debo cambiar para conseguir que los enlaces el texto sea negro y poder distinguirlos en los móviles ? Gracias.
*{
padding:0;
margin:0;
}
.container{
overflow: hidden;
}
html nav.navbar.navbar-custom{
padding: 0;
margin:0;
}
html {
width: 100%;
height: 100%;
}
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;
}
/* ------- Navigation ------------ */
#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;
padding-right: 0% !important;
}
.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;
}
.home-section.nopadd-bot {
padding-bottom: 0;
}
.color-light blockquote,.color-light p {
color: #fefefe;
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #f9f9f9;
}
.bg-dark {
background: #404040;
}
.text-light {
color: #fff;
}
.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;
}
.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;
}
.btn-lg,
.btn-group-lg > .btn {
border-radius: 2px;
}
.input-group-addon {
background-color: #fefefe;
border: 1px solid #eee;
}
/* --- button --- */
.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;
}
/* Media queries */
@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);
}
.intro {
height: 100%;
padding: 0;
}
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 25px;
}
}
@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;
}
}
@media (max-width:480px) {
.nav a{
color: black;
}
.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;
}
/* OTROS ESTILOS */
/* Añadido por Checho parrado */
* {
-webkit-text-size-adjust: none;
-webkit-box-sizing:border-box; box-sizing: border-box;
}
a{
text-decoration: none;
color: inherit;
outline: none;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.btn {
margin-top: 73px;
color: #fff;
display: inline-block;
padding: 22px 62px 24px;
background-color: #25952a /*#3da9b6*/;
font: bold 30px/40px 'Dosis', sans-serif;
}
.btn:hover {
background-color: #1d1d1d;
}
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<div class="loader">
</div>
<img src="http://i42.tinypic.com/212ct3s.jpg"
width="100%" height="650" frameborder="0" style="border:0" allowfullscreen>
<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" alt="Imagen de agrochema" />
</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="../index.html">Casa</a>
</li>
<li>
<a href="../galerias.html#about">Sobre mi</a>
</li>
<li>
<a href="../galerias.html">Servicios</a>
</li>
<li>
<a href="../galerias.html">Trabajos</a>
</li>
<li>
<a href="#works">Contacto</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">Nuestros precios...</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container_12">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. ...</p>
<ul class="list2">
<li>
<div class="prod">
<a>Mantenimiento mensual</a>
</div>
<div class="price">Desde 50€</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>