Edito para añadir los cambios que me ofrecio Edgar Gutiérrez.
Estoy tratando que la barra de navegación se confunda con la imagen, que no se distingan los límites o bordes de esta, solo se vea el texto, y pegarla a la parte derecha hasta hacer scroll. Cuando hago el scroll ya se queda fija a la parte de arriba y abarca todo el ancho de la página. Eso en el ejemplo no se muestra pues no puse todo el código porque aumenta mucho. No se si sera posible hacer lo que quiero con css, o quizá con javascript . He buscado en documentación de Bootstrap sin encontrar solución para disimular la barra de navegación y pegarla a la parte derecha de la pantalla. Como digo, al hacer scroll, la barra se queda arriba y abarca todo el ancho de pantalla, abajo no se distingue por falta de código. Dejo lo conseguido. Gracias.
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic');
body {
width: 100%;
height: 100%;
font-family: 'Lato',sans-serif;
font-weight: 300;
color: #666;
background-color: #fff;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 30px;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.6em;
}
p.lead {
font-weight: 600;
}
a {
color: #28c3ab;
-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;
color: #176e61;
}
.light {
font-weight: 400;
}
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand {
height: 40px;
padding: 5px 15px;
font-size: 18px;
line-height: 1em;
}
.navbar-brand h1{
color: #fff;
font-size: 20px;
line-height: 40px;
}
.navbar-brand:focus {
outline: 0;
}
.nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar-custom.top-nav-collapse .nav.navbar-nav {
background-color: rgba(0,0,0,0);
}
.navbar-custom ul.nav li a {
font-size: 12px;
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;
}
.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;
}
/* loader */
#preloader {
background: #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 999;
}
#loaderInner {
background:#ffffff url(../img/spinner.gif) center center no-repeat;
height: 60px;
left: 50%;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
width: 60px;
}
@keyframes boxSpin{
0%{
transform: translate(-10px, 0px);
}
25%{
transform: translate(10px, 10px);
}
50%{
transform: translate(10px, -10px);
}
75%{
transform: translate(-10px, -10px);
}
100%{
transform: translate(-10px, 10px);
}
}
@keyframes shadowSpin{
0%{
box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
}
25%{
box-shadow: 10px 10px #39CCCC, -10px -10px #FFDC00;
}
50%{
box-shadow: -10px 10px #39CCCC, 10px -10px #FFDC00;
}
75%{
box-shadow: -10px -10px #39CCCC, 10px 10px #FFDC00;
}
100%{
box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
}
}
#load {
z-index: 9999;
background-color: #FF4136;
opacity: 0.75;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin: -5px auto 0 auto;
left: 0;
right: 0;
border-radius: 0px;
border: 5px solid #FF4136;
box-shadow: 10px 0px #39CCCC, 10px 0px #01FF70;
animation: shadowSpin 1s ease-in-out infinite;
}
/* misc */
hr {
margin-top: 10px;
}
/* margins */
.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;}
/* ===========================
--- General sections
============================ */
.home-section {
padding-top: 110px;
padding-bottom: 110px;
display:block;
position:relative;
z-index:120;
}
.section-heading h2 {
font-size: 40px;
}
.section-heading i {
margin-bottom: 20px;
}
/* --- section bg var --- */
.bg-white {
background: #fff;
}
.bg-gray {
background: #f8f8f8;
}
.bg-dark {
background: #575757;
}
/* --- section color var --- */
.text-light {
color: #fff;
}
/* ===========================
--- Intro
============================ */
.intro {
width:100%;
position:relative;
background: url(http://i64.tinypic.com/2q21qq1.jpg) no-repeat top center;
background-size: cover;
height: auto;
}
#intro.intro {
padding:20% 0 0 0;
}
.intro .slogan {
text-align: center;
}
.intro .page-scroll {
text-align: center;
}
.brand-heading {
font-size: 40px;
}
.intro-text {
font-size: 18px;
}
.intro .slogan h2 {
color: #FFF;
text-shadow: none;
font-size: 60px;
line-height: 60px;
font-weight: 700;
font-family: Montserrat, sans-serif;
background-color: rgba(0, 0, 0, 0);
text-decoration: none;
text-transform: uppercase;
border-width: 0px;
border-color: #000;
border-style: none;
text-shadow: -1px 0 1px #000;
}
.intro .slogan h4 {
color: #fff;
text-shadow: -1px 1px 1px #000;
}
@media (max-width: 768px) {
.intro .slogan h2 {
font-size: 48px;
}
}
@media (max-width: 600px) {
.intro .slogan h2 {
font-size: 36px;
}
}
/* ===========================
--- About
============================ */
.boxed-grey {
background: #f9f9f9;
padding: 20px;
}
.team h5 {
margin-bottom: 10px;
}
.team p.subtitle {
margin-bottom: 10px;
}
.avatar {
margin-bottom: 20px;
}
.team-social {
margin-left: 0;
padding-left: 0;
}
.team-social {
text-align: center;
}
.team-social li{
display: inline-block;
margin:0 !important;
padding:0;
}
.team-social a{
margin:0;
padding:0;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #3bbec0;
color: #fff;
-webkit-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.team-social a i{
text-align: center;
margin:0;
padding:0;
}
.team-social .social-facebook a{background: #3873ae;}
.team-social .social-twitter a{background: #62c6f8;}
.team-social .social-dribble a{background: #d74980;}
.team-social .social-deviantart a{background: #8da356;}
.team-social .social-google a{background: #000;}
.team-social .social-vimeo a{background: #51a6d3;}
.team-social .social-facebook a:hover{background: #4893ce;}
.team-social .social-twitter a:hover{background: #82e6ff;}
.team-social .social-dribble a:hover{background: #f769a0;}
.team-social .social-deviantart a:hover{background: #adc376;}
.team-social .social-google a:hover{background: #333;}
.team-social .social-vimeo a:hover{background: #71c6f3;}
/* ===========================
--- Services
============================ */
.service-icon {
margin-bottom: 20px;
}
/* ===========================
--- Contact
============================ */
form#contact-form .form-group label {
text-align: left !important;
display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
form#contact-form input,form#contact-form select,form#contact-form textarea {
border-radius: 0;
border: 1px solid #eee;
-webkit-box-shadow: none;
box-shadow: none;
}
form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.input-group-addon {
background-color: #fefefe;
border: 1px solid #eee;
border-radius: 0;
}
.widget-contact {
text-align: left;
}
.validation {
color: red;
display:none;
margin: 0 0 20px;
font-weight:400;
font-size:13px;
}
#sendmessage {
color: green;
border:1px solid green;
display:none;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#errormessage {
color: red;
display:none;
border:1px solid red;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#sendmessage.show, #errormessage.show, .show {
display:block;
}
.company-social {
margin-left: 0;
padding-left: 0;
margin-top: 10px;
}
.company-social {
text-align: left;
}
.company-social li{
display: inline-block;
margin:0 !important;
padding:0;
}
.company-social a{
margin:0;
padding:0;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #3bbec0;
color: #fff;
-webkit-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.company-social a i{
text-align: center;
margin:0;
padding:0;
}
.company-social .social-facebook a{background: #3873ae;}
.company-social .social-twitter a{background: #62c6f8;}
.company-social .social-dribble a{background: #d74980;}
.company-social .social-deviantart a{background: #8da356;}
.company-social .social-google a{background: #000;}
.company-social .social-vimeo a{background: #51a6d3;}
.company-social .social-facebook a:hover{background: #4893ce;}
.company-social .social-twitter a:hover{background: #82e6ff;}
.company-social .social-dribble a:hover{background: #f769a0;}
.company-social .social-deviantart a:hover{background: #adc376;}
.company-social .social-google a:hover{background: #333;}
.company-social .social-vimeo a:hover{background: #71c6f3;}
/* ===========================
--- Footer
============================ */
footer {
text-align: center;
padding: 50px 0 ;
}
footer p {
color: #f8f8f8;
}
.credits, .credits a {
color: #fff;
}
/* ==========================
Parallax
============================= */
#parallax1{
background-image: url(../img/parallax/1.jpg);
}
#parallax1:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC);
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.7;
z-index: -1;
}
#parallax2{
background-image: url(../img/parallax/2.jpg);
}
#parallax2:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC);
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.7;
z-index: -1;
}
/* ===========================
--- Elements
============================ */
.btn {
border-radius: 0;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-circle {
width: 70px;
height: 70px;
margin-top: 15px;
padding: 7px 16px;
border: 2px solid #fff;
border-radius: 50%;
font-size: 40px;
color: #fff;
background: 0 0;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.btn-circle.btn-dark {
border: 2px solid #666;
color: #666;
}
.btn-circle:hover,
.btn-circle:focus {
outline: 0;
color: #fff;
background: rgba(255,255,255,.1);
}
.btn-circle.btn-dark :hover,
.btn-circle.btn-dark :focus {
outline: 0;
color: #999;
background: #fff;
}
.btn-circle.btn-dark :hover i,
.btn-circle.btn-dark :focus i{
color: #999;
}
.page-scroll .btn-circle i.animated {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.page-scroll .btn-circle:hover i.animated {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
0 {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0 {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#text {
color: #fff;
background: #ffcc00;
}
#map {
height: 500px;
}
.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) {
.team.boxed-grey {
margin-bottom: 30px;
}
.boxed-grey {
margin-bottom: 30px;
}
}
@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;
}
.tp-banner-container {
padding-top:40px;
}
.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}
}
html .nav.navbar-nav {
background-color: rgba(255,255,255,0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Desarrollador </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<h1>MIGUEL-ESPESO</h1>
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#intro">Casa</a></li>
<li><a href="#about">Formacion</a></li>
<li><a target="_blank" href="#">Ubicacion</a></li>
<li><a href="#contact">Contacto</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
</li>
<li>
<form class="pull-right" method=GET action="http://www.google.com/search">
<a href="http://www.google.com/">
</a>
<input type=text name=q maxlength=255 placeholder="Busqueda Google">
<input Type=hidden name=hl value="es">
<input type=submit name=btnG VALUE="Buscar...">
</form>
</li>
</ul>
</div>
</div>
</nav>
<section id="intro" class="intro">
<div class="slogan">
<h2>Creamos <span class="text_color">que su empresa </span> </h2>
<h4>Le hacemos </h4>
</div>
<div class="page-scroll">
<a href="#service" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>
<section id="about" class="home-section text-center">
</section>
<section id="service" class="home-section text-center bg-gray">
</section>
<section id="contact" class="home-section text-center"> </section>
<footer> </footer>
</body>
</html>
overflow:hidden
y con 'background-color: transparent' sin éxito.