In a Bootstrap nav-bar, I'm trying to create two items whose drop-shadows intersect each other.
http://codepen.io/anon/pen/gaEJWY
It currently looks like this:
But I want it to look like this:
Anyone have an idea how to make this happen(using CSS preferably)?
.navbar-inner {
box-shadow: 0px 4px 8px #888888;
}
.navbar-brand {
background: #F8F8F8;
width: 160px;
height: 160px;
border-radius: 50%;
position: absolute;
box-shadow: 0px 10px 8px #888888;
margin-top: -25px;
padding-top: 29px;
padding-left: 29px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title>My Product</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="/stylesheets/all.css" rel="stylesheet" />
<script src="/javascripts/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<div class="container">
<!-- Brand and toggle get grouped for 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="#">
<img src="//placehold.it/100x100">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Store Locator</li>
<li>Share</li>
<li>Cocktails</li>
<li>Shop</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<!--<div class="container">-->
<!--<img src="images/header-video.jpg">-->
<!--</div>-->
</body>
</html>
Many thanks!
You can create a pseudo element that will be behind your circle with the same color and height as the navbar.
You have to do the maths on the positioning, but it works.
.navbar-brand:before{
/* bigger than the circle to mask the shadow 1*/
width:200px;
/* same height as navbar */
height:50px;
content:".";
overflow:hidden;
text-indent:99999px;
display:block;
background: #F8F8F8;
position: absolute;
/* cause your div has margin -25px */
top:25px;
/* so it will mask everything on the sides */
left:-15px;
}
.navbar-brand > * {
/* everything inside the navbar brand need to have its positioning set */
position: relative;
}
Pen
Related
I need to do a responsive navbar with:
LOGO1(left side) text(centered) LOGO2(right side)
I am trying the next but It doesnt work when when resized to small screens.
Here is my problem: when in "lg" size the screen is correct. But when in "md" size or smaller the LOGO2 goes to left side.
And, in 'xs' size the 'text' continues showing with the LOGO2 below it.
In my markup code I have some angular staff, but it is not important to answer the question.
What am I doing wrong?
//markup
div class="container-fluid example2">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isMyNavCollapsed = !isMyNavCollapsed" ng-init="isMyNavCollapsed=false">
<span class="sr-only">Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img src="img/SoundCloud64.png" alt="Cloud Clínica">
</a>
</div>
<p class='navbar-text navbar-center font35'><strong>Retire seu ticket aqui</strong></p>
<div class="collapse navbar-collapse" id="navbar_right" uib-collapse="isMyNavCollapsed">
<ul class="nav navbar-nav navbar-right">
<li><img class="img-responsive" height="150" width="200" src="img/red-ticket-md.png" /></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
//css
<style type="text/css">
.example2 .navbar-brand>img {
padding: 7px 15px;
}
.navbar-right img{
padding: 7px 15px;
}
.navbar-center
{
display:inline-block;
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
overflow: visible;
height: 0;
padding:15px 10px 10px 10px;
z-index: 10099;
}
.navbar-nav,
.navbar-right {
display:inline-block;
position: relative;
z-index: 100100;
}
</style>
so I am trying to make a cool portfolio landing page with Bootstrap.
The template includes a fixed navbar and a sticky footer. The rest of the page is whtespace that I want to fill with basically a giant background so I put a test paragraph element to try and see how to size it. I figured I could just add CSS rules that made body's height 100% but when I do that I get an overflow and my footer isn't at the bottom of the page anymore. Instead I have a small overflow of the background at the bottom.
How can I fix this? I made the background color bright yellow to try and show what I mean. Any help is appreciated!
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Work in Progress</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="#">Portfolio</a>
</div>
<div id="navbar" class="navbar-collapse collapse"
aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Rails Projects</li>
<li>LAMP Projects</li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="main">
<div class="container">
<p>Test text</p>
</div>
</div>
<!--footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Contact info or whatever goes here.</p>
</div>
<div class="col-md-4 col-md-offset-4">
<p>More info or whatever goes here.</p>
</div>
</div>
</div>
</footer>
</body>
</html>
And here's the CSS
html, body{
height: 100%
}
.main{
height: 100%;
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
You can use this CSS (position: relative on body and .main height as calc function (100% minus height of the footer):
html,
body {
height: 100%;
position: relative;
}
.main {
height: calc(100% - 60px);
background-color: #FFFF00;
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
}
Demo: https://fiddle.jshell.net/uvaef49h/1/
You want to use the following CSS:
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.main{
height: calc(100% - 110px);
background-color: #FFFF00;
margin-top: 50px;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #000;
color: #9d9d9d;
overflow: hidden;
}
Why did it not work before?
The body had a height of X, main occupied 100% of that. However main was pushed down by the 50px margin. After the .main part, you had your footer which was completely pushed out from the view-port so I had to remove another 60px from .mains height. The footer still had an overflow issue so I hid that.
Lastly, the browser wanted to add some random margin/padding so I Removed that as well.
I've a bootstrap formatted page with a fixed top navbar.
What I want is to set a full width (fixed height) cover image just over the nav (responsive possibly...).
I've tried this, but the cover just not show.
UPDATE1:
the navbar is showed in bottom of the page (like a footer)... don't understand why...
Here is my HTML:
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
...
...
...
Navbar CSS customization and cover CSS:
body {
min-height: 2000px;
padding-top: 70px;
}
.navbar-brand,
.navbar-nav li a.main-bar{
line-height: 70px;
height: 70px;
padding-top: 0;
}
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
}
.FlexEmbed:before {
content: "";
display: block;
width: 100%;
}
.FlexEmbed--3by1:before {
padding-bottom: 33.33333%;
}
Thanks in advance stackoverflow community!
UPDATE 2:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>MySite</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">
<img style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Mydropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>element1</li>
<li class="divider"></li>
<li>element2</li>
<li>element3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>element4</li>
<li>element5</li>
<li>element6</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="content"></div> // here I paste all the content via jQuery
</body>
</html>
Heres a fiddle to my problem.
I hope I understood your question correctly. One option is to position your background fixed as well. By adding width: 100%; and background-size: cover; you'll get it to cover completely.
Update:
To get it to be more like a "Facebook cover image" add a height to the image and remove the padding-top: 70px; on the body. Then you should be set.
.FlexEmbed {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 70px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
You could also add some margin to your .navbar-fixed-top to see that the background is displayed on top.
.navbar-fixed-top {
top: 70px;
}
Check out my updated demo here.
Use JsFiddle to create a live demo.
The navbar is at the bottom because you have the image display as block;
I'm not quite sure either about what you're trying to achieve but, have you tried with z-index?
I am using twitter bootstrap in Bonfire. I am trying to have a footer at the bottom page if there is less content, and if there is more content, the footer goes towards the end.
I have been trying for hours, and not able to find out what I am missing. I checked examples and codes available, but not able to find out what is different, or missing.
Would really appreciate if anyone could point out what is missed here.
<!doctype html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />
<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Brokerage Free - PAN Services </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
Apply for PAN <b class="caret"></b>
<ul class="dropdown-menu">
<li >New PAN Application</li>
<li class="divider"></li>
<li>Replacement PAN Application</li>
<li class="divider"></li>
<li>Correction PAN Application</li>
</ul>
</li>
<li >FAQ</li>
<li>Track Application Status</li>
<li>Contact Us</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class = "container">
<h1> Privacy Policy </h1>
We are a financial Services Company, offering a wide variety of Financial Services.
</div><div class="push"></div>
<footer>
<div class="container">
<div class="span12">
<div clas="row">
<div class="span2 offset1">About US</div>
<div class="span2 ">Privacy Policy</div>
<div class="span2 ">Terms of Use</div>
<div class="span2 ">Contact Us</div>
</div>
<div class="push"></div>
</div>
<div class="row">
<p align="center">© Brokerage Free 2014. - All rights reserved.
</div>
</div>
</footer>
</div>
The footer_style.css is given below:
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}
#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>
This problem is a CSS problem and had nothing to do with Bonfire. I am posting this solution so if someone has a similar problem in the future, might benefit out of this.
The following link helped me with finding a solution:
http://css-tricks.com/snippets/css/sticky-footer/
The way to go about fixing this issue was to have a wrapper div, and a footer div that is outside of the wrapper div. The link has details.
Best.
This looks great:
http://imageshack.us/a/img96/5789/n4u7.png
But when you shrink another 5 pixels, the columns appear to break and the image goes to a new line.
http://imageshack.us/a/img59/2195/uk4v.png
Instead, I would like the image to shrink, so it can stay on the same line as the collapsible button.
The HTML:
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- container -->
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">
<img class="img-responsive" src="assets/img/logo.png" >
</a>
</div>
<!-- /navbar header -->
<!-- collapse -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<!-- /collapse -->
</div>
<!-- container -->
</nav>
<!-- /navbar -->
The CSS:
nav.navbar {
padding-top: 0;
padding-bottom: 0;
background: rgba(179, 153, 255, .5)
}
nav.navbar div.container {
background: rgba(179, 153, 255, 1.0);
border: 1px solid black;
}
a.navbar-brand {
padding: 0 0 20px 15px;
}
img.img-responsive {
width: 100%;
}
#media (min-width: 992px) {
ul.navbar-nav li a {
padding-top: 12px;
padding-bottom: 12px;
border-top: 2px solid white;
border-bottom: 2px solid white;
margin-top: 36px;
}
}
If you want the image to shrink when you make the viewport smaller, the width of the image's containing element needs to be set as a percentage. In this case the image's immediate containing element is the anchor, so if you set that anchor width of 60% or whatever works, then when the viewport shrinks, the anchor width will shrink to maintain its 60% of its container, and the image with its width of 100% of the anchor will also shrink. Anchor will need to have block level display too.