html - Trying to get Nav menu and logo to align within the grid -
i working on responsive nav menu website. changed header image image slider on index.html page nav menu no longer aligned websites grid.
in 'about', 'services' , contact pages menu positioned perfectly. in index.html page have css code position navbar , logo position:absolute; rest of navs on other page position relative.
i want nav menus on each page align same there no obvious difference when user changes pages. may not obvious on small screens when compare index , pages on mobile device obvious nav not in correct grid.
can point me in right direction? here link live site http://shaneogrady.me/navtest/
html
<!doctype html> <html> <head> <title> hello </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content=""><script> addeventlistener("load", function() { settimeout(hideurlbar, 0); }, false); function hideurlbar(){ window.scrollto(0,1); } </script> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <script src="js/jquery-1.11.1.min.js"></script> <link href='http://fonts.googleapis.com/css?family=open+sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'> <link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> <script src="js/wow.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> new wow().init(); </script> <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jquery(document).ready(function($) { $(".scroll").click(function(event) { event.preventdefault(); $('html,body').animate({scrolltop:$(this.hash).offset().top},900); }); }); </script> </head> <body> <div id="home" class="banner a-banner"> <div class="container" style=" position: relative; z-index: 5; top: 0%; left: 5%;"> <div class="head-logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div> <div class="top-nav"> <span class="menu"><img src="images/menu.png" alt=""></span> <ul class="nav1"> <li class="hvr-sweep-to-bottom"><a href="contact.html">contact<i><img src="images/nav-but5.png" alt=""/></i></a></li> <li class="hvr-sweep-to-bottom"><a href="services.html">services<i><img src="images/nav-but3.png" alt=""/></i></a></li> <li class="hvr-sweep-to-bottom"><a href="about.html">about<i><img src="images/nav-but2.png" alt=""/></i></a></li> <li class="hvr-sweep-to-bottom active"><a href="index.html">home<i><img src="images/nav-but1.png" alt=""/></i></a></li> <div class="clearfix"></div> </ul> <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slidetoggle( 300, function() {}); }); </script> </div> </div> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"> <div class="overlay"></div> </div> <div class="hero"> <hgroup> <h1>batman</h1> <h3>batman</h3> </hgroup> <div class="see-button"> <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">see more</a> </div> </div> </div> <div class="item slides"> <div class="slide-2"> <div class="overlay"></div> </div> <div class="hero"> <hgroup> <h1>superman</h1> <h3>superman</h3> </hgroup> <div class="see-button"> <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">see more</a> </div> </div> </div> <div class="item slides"> <div class="slide-3"> <div class="overlay"></div> </div> <div class="hero"> <hgroup> <h1>spiderman</h1> <h3>spiderman</h3> </hgroup> <div class="see-button"> <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="services.html" role="button">see more</a> </div> </div> </div> </div> </body> </html> css
body{ background:#fff; font-family: 'open sans', sans-serif; } body { transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } .banner{ background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9; min-height: 855px; background-size: cover; position: relative; } .head-logo{ float: left; } .head-logo { display: block; margin-top: 3.5em; } .top-nav{ float: right; width: 70%; } .top-nav ul{ padding:0; margin:0; } .top-nav ul li { display: inline-block; width: 20%; margin-right: .4em; display:block; float: right; line-height:38px; margin:0; padding:0; position:relative; } .top-nav ul li.active{ background: #5abc5e; } .top-nav ul li a{ color: #fff; font-size: 18px; margin-right: .4em; float: left; padding: 3em 0em 3em 1.4em; text-align: center; width: 79%; } .top-nav ul li i{ display: block; margin-top: 1em; color: #fff; font-size: 11px; font-style: italic; } .top-nav ul li a:hover{ text-decoration:none; } /********************************/ /* fade bs-carousel */ /********************************/ .fade-carousel { position: relative; height: 100vh; } .fade-carousel .carousel-inner .item { height: 100vh; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; } /********************************/ /* hero headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s ease-in-out .1s; -moz-transition: 2s ease-in-out .1s; -ms-transition: 2s ease-in-out .1s; -o-transition: 2s ease-in-out .1s; transition: 2s ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 1; -webkit-transition: 2s ease-in-out .1s; -moz-transition: 2s ease-in-out .1s; -ms-transition: 2s ease-in-out .1s; -o-transition: 2s ease-in-out .1s; transition: 2s ease-in-out .1s; } /********************************/ /* overlay */ /********************************/ .overlay { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #080d15; opacity: .3; } /********************************/ /* slides backgrounds */ /********************************/ .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .slides .slide-1 { background-image: url(../images/banner2.jpg); } .fade-carousel .slides .slide-2 { background-image: url(../images/squad.jpg); } .fade-carousel .slides .slide-3 { background-image: url(../images/roadside.jpg); } /********************************/ /* media queries */ /********************************/ @media screen , (min-width: 980px){ .hero { width: 980px; } } @media screen , (max-width: 640px){ .hero h1 { font-size: 4em; } } /* sweep bottom */ .hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translatez(0); -o-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); transform: translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -ms-osx-font-smoothing: grayscale; -o-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; -o-transition-property: color; -moz-transition-property: color; -ms-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #5abc5e; -webkit-transform: scaley(0); -o-transform: scaley(0); -moz-transform: scaley(0); -ms-transform: scaley(0); transform: scaley(0); -webkit-transform-origin: 50% 0; -o-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; -o-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { color: white; } .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { -webkit-transform: scaley(1); transform: scaley(1); } .banner-bottom-grids{ margin: 5em 0; } .banner-bottom-left{ padding: 0; padding-left: 0 !important; padding-right: 0 !important; margin: 0; } .banner-bottom-left h3{ color: #000; font-size: 37px; margin: 0; line-height: 1.2em; font-weight: 300; } .banner-bottom-left h5{ color: #969696; font-size: 14px; margin: 1em 0; line-height: 1.8em; } .banner-bottom-left h5 span{ display:block; } .banner-bottom-left p{ color: #333333; font-size: 14px; margin: 0; line-height: 1.8em; font-weight: 600; } .banner-bottom-right img{ width:100%; } .see-button{ margin-top: 1em; } .see-button a{ font-size: 14px; text-transform: uppercase; text-decoration: none; padding: 1em 4em; outline: none; background: #393939; border: none !important; border-radius:0; } .jumbotron.banner-bottom-left { background: none; } /*------------------ slider part starts here----------*/ #slider2, #slider3 { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0 auto; } .rslides_tabs { list-style: none; padding: 0; background: rgba(0,0,0,.25); box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); font-size: 18px; list-style: none; margin: 0 auto 50px; max-width: 540px; padding: 10px 0; text-align: center; width: 100%; } .rslides_tabs li { display: inline; float: none; margin-right: 1px; } .rslides_tabs { width: auto; line-height: 20px; padding: 9px 20px; height: auto; background: transparent; display: inline; } .rslides_tabs li:first-child { margin-left: 0; } .rslides_tabs .rslides_here { background: rgba(255,255,255,.1); color: #fff; font-weight: bold; } .events { list-style: none; } .callbacks_container { position: relative; float: left; width: 100%; } .callbacks { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .callbacks li { position: absolute; width: 100%; left: 0; top: 0; } .callbacks img { position: relative; z-index: 1; height: auto; border: 0; } .callbacks .caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; left: 0; right: 0; padding: 10px 20px; margin: 0; max-width: none; top: 10%; text-align: center; } .callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 52%; left: 0; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 55px; background: transparent url("../images/themes.png") no-repeat left top; margin-top: -65px; } .callbacks_nav:active { opacity: 1.0; } .callbacks_nav.next { left: auto; background-position: right top; right: 0; } #slider3-pager { display: inline-block; } #slider3-pager span{ float: left; } #slider3-pager span{ width:100px; height:15px; background:#fff; display:inline-block; border-radius:30em; opacity:0.6; } #slider3-pager .rslides_here { background: #fff; border-radius:30em; opacity:1; } #slider3-pager { padding: 0; } #slider3-pager li{ display:inline-block; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li{ position: relative; display: block; float: left; } .rslides img { height: auto; border: 0; width:100%; } .callbacks_tabs{ list-style: none; position: absolute; top: 78%; z-index: 999; left: 45%; padding: 0; margin: 0; } .slider-top{ text-align: center; padding:10em 0; } .slider-top h1{ font-weight:700; font-size:48px; color:#010101; } .slider-top p{ font-weight:400; font-size:20px; padding:1em 7em; color:#010101; } .slider-top ul.social-slide{ display:inline-flex; margin: 0px; padding: 0px; }
you might want try rebuilding css scratch instruction instruction , see changing something. if change doesn't apply, try adding !important @ end (like :{ width : 30% !important;}), bootstrap bit possessive.
maybe throwing position : absolute ; right :0; top:0; in .top-nav , building there trick.
Comments
Post a Comment