html - Get navbar to overlap header? -


i using bootstrap. there gap between navbar , header image. want navbar go on top of image , want image begin @ top of page. how rid of white gap?

here html navbar , image:

<nav class="navbar navbar-default">   <div class="container-fluid">     <!-- brand , toggle grouped better mobile display -->     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">         <span class="sr-only">toggle navigation</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#">brand</a>     </div>      <!-- collect nav links, forms, , other content toggling -->     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">link <span class="sr-only">(current)</span></a></li>         <li><a href="#">link</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>           <ul class="dropdown-menu">             <li><a href="#">action</a></li>             <li><a href="#">another action</a></li>             <li><a href="#">something else here</a></li>             <li role="separator" class="divider"></li>             <li><a href="#">separated link</a></li>             <li role="separator" class="divider"></li>             <li><a href="#">one more separated link</a></li>           </ul>         </li>       </ul>       <form class="navbar-form navbar-left" role="search">         <div class="form-group">           <input type="text" class="form-control" placeholder="search">         </div>         <button type="submit" class="btn btn-default">submit</button>       </form>       <ul class="nav navbar-nav navbar-right">         <li><a href="#">link</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>           <ul class="dropdown-menu">             <li><a href="#">action</a></li>             <li><a href="#">another action</a></li>             <li><a href="#">something else here</a></li>             <li role="separator" class="divider"></li>             <li><a href="#">separated link</a></li>           </ul>         </li>       </ul>     </div><!-- /.navbar-collapse -->   </div><!-- /.container-fluid --> </nav>

header html:

    <figure class="intro">   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/diver2.jpg" alt="" />       <figcaption class="caption">         <h1>invasion</h1>       </figcaption>       <span class="overlay">     <svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"        viewbox="0 0 500 250" enable-background="new 0 0 500 250" xml:space="preserve" preserveaspectratio="none">     <path fill="#ffffff" d="m250,246.5c-97.85,0-186.344-40.044-250-104.633v250h500v141.867c436.344,206.456,347.85,246.5,250,246.5z"       />     </svg>       </span>

here css:

    *, *:before, *:after {       margin: 0;       padding: 0;       box-sizing: border-box;     }      html, body {       width: 100%;       height: 100%;       font-family: 'roboto', sans-serif;     }      .intro {       position: relative;       height: auto;       transform: translatez(0);       // background-image: linear-gradient(35deg, $blue, $yellow);        img {         position: relative;         display: block;          width: 100%;          height: auto;         z-index: 1;         mix-blend-mode: multiply;       }     }      .intro .caption {       position: absolute;       bottom: 25%;       left: 0;       width: 100%;       text-align: center;       z-index: 3;       color: white;        h1 {         display: inline-block;         width: 70%;         font-size: 6vw;         font-weight: 100;       }     }      .intro .overlay {       position: absolute;       bottom: -2px;       left: 0;       width: 100%;       height: 100%;        z-index: 2;       pointer-events: none;        svg {         position: absolute;         top: 0;         left: 0;         width: 100%;         height: 100%;       }     }

i have no custom css of yet on navbar. tried setting image top: 0, or -10% won't move. thank you!

you can move header navbar modifying .intro to:

.into {       position: relative;       height: auto;       transform: translatez(0);       top: -20px; /* .navbar has margin-bottom: 20px; */ }

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more