jquery - Transparent nav-bar -


i have following issue:

  • i use navbar background-color
  • i want delete background-color , make transparent
  • i deleted background , applied position:absolute it

information: image blow shows design after position:absolute. attached sample code showing original design before applied changes make transparent.

problem: after applied position:absolute navbar items moved right left.

goal: make goal clear: want same navbar transparent background.

images shows change after position:abosulte

* {    box-sizing: border-box;    margin: 0;    padding: 0;  }    .row {    clear: both;  }    .spalten-6 {    width: 49.99992%;  }    .spalten-12 {    width: 100%;  }    .spalten-6,  .spalten-12 {    float: left;  }    .img-box img {    width: 100%;  }    .img-box {    border-left: 2px solid white;    border-top: 2px solid white;  }    #video-container {    position: relative;    height: 300px  }    #video-container {    top: 0%;    left: 0%;    height: 100%;    width: 100%;    overflow: hidden;  }    video#bgvid {    position: absolute;    z-index: -1;    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;    background-size: cover;    transition: 1s opacity;  }    video#bgvid.fillwidth {    width: 100%;    position: relative  }    nav {    background-color: black;    margin: 0;    overflow: hidden;  }    nav ul {    margin: 0;    padding: 0;  }    nav ul li {    list-style-type: none;  }    nav ul li {    color: white;    background-color: black;    display: block;    line-height: 1em;    padding: 1em 1.5em;    text-decoration: none;    letter-spacing: 0.15em;    font-size: 13px;  }    nav ul li a.logo {    background-color: black;  }    nav ul li a:hover {    background-color: ;  }    li {    float: right;  }    li:first-child {    float: left;  }    nav ul li img {    width: 16px;    height: 16px;    float: right;    margin-left: -20px;  }    .logo {    font-size: 20px;    letter-spacing: 0.1em;  }    .abstand-top {    margin-top: 10px;  }      }  nav ul li img {    width: 16px;    height: 16px;    float: right;    margin-left: -20px;  }  .logo {    font-size: 20px;    letter-spacing: 0.1em;  }  .abstand-top {    margin-top: 10px;  }
<nav>    <ul>      <li><a href="http://google.com/" class="logo">boomyeah</a></li>      <li class="abstand-top">        <a href="#"><img src="images/icon-facebook.svg" alt=""></a>      </li>      <li class="abstand-top">        <a href="#"><img src="images/icon-instagram.svg" alt=""></a>      </li>      <li class="abstand-top"><a href="http://google.com/">work   &nbsp; &nbsp; &nbsp;  |</a></li>      <li class="abstand-top"><a href="http://google.com/">about</a></li>      <li class="abstand-top"><a href="http://google.com/">crew</a></li>      <li class="abstand-top"><a href="http://google.com/">contact</a></li>    </ul>  </nav>    <div id="video-container">    <video id="bgvid" loop class="fillwidth" autoplay>  <source src=http://bigcom.com/assets/2014/08/ichooseb.mp4 type=video/mp4>  </video>  </div>

hope find solution.

  1. you didn't set position of nav absolute
  2. you set background color black, not transaper.
  3. you need set z-index make sure has higher z-index user can click on items in menu.

* {  	box-sizing: border-box;  	margin: 0;  	padding: 0;  }                    .row {              clear: both;          }                    .spalten-6 {              width: 49.99992%;          }            .spalten-12 {              width: 100%;          }                    .spalten-6,  .spalten-12           { float:left;}                .img-box img {              width: 100%;          }                    .img-box {              border-left: 2px solid white;              border-top: 2px solid white;          }              #video-container {      position: relative;      height:300px  }  #video-container {      top:0%;      left:0%;      height:100%;      width:100%;      overflow: hidden;    }  video#bgvid {      position:absolute;      z-index:-1;      background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;      background-size: cover;      transition: 1s opacity;  }  video#bgvid.fillwidth {      width: 100%;     position:relative  }    nav {      margin: 0;      overflow: hidden;      position: absolute;      z-index: 10;  }    nav ul {      margin: 0;      padding: 0;  }    nav ul li {      list-style-type: none;  }    nav ul li {      color: white;      display: block;      line-height: 1em;      padding: 1em 1.5em;      text-decoration: none;      letter-spacing: 0.15em;      font-size: 13px;  }    nav ul li a.logo {      background-color: black;  }    nav ul li a:hover {      background-color: ;  }    li {      float: right;  }    li:first-child {      float: left;  }                   nav ul li img {             width: 16px;             height: 16px;             float: right;             margin-left: -20px;  }            .logo {              font-size: 20px;              letter-spacing: 0.1em;          }                    .abstand-top {              margin-top: 10px;                        }                  }                           nav ul li img {             width: 16px;             height: 16px;             float: right;             margin-left: -20px;  }            .logo {              font-size: 20px;              letter-spacing: 0.1em;          }                    .abstand-top {              margin-top: 10px;                        }
<nav>      <ul>          <li><a href="http://google.com/" class="logo">boomyeah</a></li>          <li class="abstand-top"><a href="#"><img src="images/icon-facebook.svg" alt=""></a></li>          <li class="abstand-top"><a href="#"><img src="images/icon-instagram.svg" alt=""></a></li>           <li class="abstand-top"><a href="http://google.com/">work   &nbsp; &nbsp; &nbsp;  |</a></li>          <li class="abstand-top"><a href="http://google.com/">about</a></li>          <li class="abstand-top"><a href="http://google.com/">crew</a></li>          <li class="abstand-top"><a href="http://google.com/">contact</a></li>               </ul>  </nav>      <div id="video-container">  <video id="bgvid" loop class="fillwidth" autoplay>  <source src=http://bigcom.com/assets/2014/08/ichooseb.mp4 type=video/mp4>  </video>   </div>


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more