I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}
Related
I wonder why the icon : arrow-alt-circle-up does not display...
in the same div I display the user icon wo any problem...
arrow-alt-circle-up icon is lsited in v5 Free icons...
<h2>Test jQuery().animate()</h2>
<div class="row" style="margin-bottom: 30px;">
<div class="col-4"></div>
<div class="col-4" id="scrollTop">
<div class="align-items-center justify-content-end">
<i class="fas fa-user"></i>
<i class="fas fa-arrow-alt-circle-up"></i>To Top
</div>
</div>
</div>
UPDATE
I did some tests in jsFiddle , and I can get fas fa-arrow-up
but this does not work also inside my html code...
jsFiddle
SOLVED ... forget to add it into fontawesome.library ... I am using v5 !
import fontawesome from '#fortawesome/fontawesome'
import faArrowCircleUp from '#fortawesome/fontawesome-free-solid/faArrowAltCircleUp'
fontawesome.library.add(faArrowCircleUp)
<div class="align-items-center justify-content-end">
<div class="fa-2x">
<i class="fas fa-arrow-alt-circle-up"></i>To Top
</div>
Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}
I have a express handlebar application with main.hbs as the layout file.
//main.hbs
<html>
<head></head>
<body>
{{> header}}
{{{body}}}
<script src='/js/jquery-2.2.4.min.js'></script>
<script src='/js/bootstrap.min.js'></script>
</body>
</html>
When i click a link let's say "settings" in dashboard page then it redirects to settings page where i have sidebar and main content page.
This page also uses main.hbs as layout.
//settings.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li>Views</li>
<li>Users</li>
<li>Sites</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<div id="settingsContainer">
//Content should be rendered here just like the {{{body}}}
</div>
</div>
</div>
So how can i able to render the desired content inside the "settingsContainer".
As per my understanding in layout file {{{body}}} is used as a placeholder for where the main content should be rendered.
But this is a different page. Is there a way i can render the content based on the link clicked from sidebar.
Any help and pointer will be much appreciated!
i don't know much about handlebars but you can achieve the same with bootstrap tabs.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tabbable">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li class="">Views</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<hr>
<div id="settingsContainer">
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="account">
//render partial for account
</div>
<div class="tab-pane" id="views">
//render partial for views
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps
I am trying to show flot plot in a bootstrap panel, utilizing the full height available, starting with the panel closed. When I open the panel the graph keeps growing in height.
<div class="container">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title ">
<a data-toggle="collapse" data-target="#panel1" >
<h3>Flot Example - fill height when opened</h3>
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="panel1">
<div class="panel-body">
<div id="placeholder"></div>
</div>
</div>
</div>
</div>
This jsfiddle demonstrates the issue: http://jsfiddle.net/65w5xor5/13/
I am trying to fixed the menu in the template, but every time when I use the fixed function in the menu, an error occurs because the menu is misplaced to the right off the page.
The example is here: http://jsfiddle.net/ecram/ddbvg532/1/
Reviewing the code and I think the problem is on the Grid.
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="ui fixed inverted pointing menu">
<div class="header item"><i class="home icon"></i> Principal
</div>
<div class="right menu">
<a class="item"> About</a>
<a class="item"> People</a>
<a class="item"> Projects</a>
</div></div></div>
</div>
I resolve the problem using:
<style type="text/css">.fijo {position:fixed !important; top:0px; z-index:10 !important} </style>
<div class="fijo">
Content
</div>