Hello, I have problems with my website on mobile devices, the thing that the link button on one page appears on the left and on another it appears on the right. But the text displayed when clicking the links button is barely recognizable, I have the following code and I can't get the black link words to show. What should I change to make the text links black and be able to distinguish them on mobile? Thanks.
*{
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>
Your problem is in the media query, since you are telling it to have the color
#eee
. Simply set the rule that applies to the links in the media query to black or whatever color you like and you're good to go.Your modified example:
Change the color property of the links(a) to 'black' or '#000'