bootstrap navbar sticks to top by default in safari browser - html

I set the navbar of my site to only stick to the top when you scroll. But it stays at the top by default on safari. Here is my site: krishagric.com
safari browser image
How do i fix it to work like other browsers.
Here is the navbar html and css code:
.navbar {
background-color: white;
border: none;
margin: none;
}
.sticky {
position: sticky;
top: 5px; /* When the element reaches top: 5px, it becomes fixed. */
z-index: 100;
}
<nav class="navbar navbar-default navbar-fixed-top sticky" role="navigation">
<div class="container-fluid">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Consultation</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>

Safari needs a little extra love here (name prefixing). So to .sticky add:
position: -webkit-sticky;

Related

Slight gapping between navbar border

Sort of a weird issue that I can't seem to find an answer to online, so I'll see if anyone else here has experienced a similar problem.
I have a relatively tall bootstrap 3 navbar (110px in height) with a gradient background.
I want to add a 1px border to the bottom of the navbar just so it blends into my page a bit better, but for some reason when I do this there is a slight gap (appears to be about 1px) where I can see through the navbar to what's behind the page.
I tried to replicate the issue on codepen but for whatever reason, the issue isn't happening when I do it there so I included a screenshot below.
navbar issue
Not sure if you can make it out or not but there is a gap between the bottom of the navbar and the 1px border. I made the border in orange just so it's easier to see.
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
height:100%;
}
.navbar-default {
background: linear-gradient(0deg, rgba(77,77,77,1) 0%, rgba(0,0,0,1)
100%);
border-bottom: 1px solid orange;
height:110px;
padding:30px 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
If anyone has any helpful tips on how to perhaps remove this gapping it would be greatly appreciated!

Hide scrolled content under fixed transparent header bootstrap

I've seen some similar q's but the solutions weren't working possibly because I'm using bootstrap. The body of my page is a gradient of two colors running vertically. The header is fixed and should be adopting the corresponding color of the gradient. Thus I made it transparent. I would like to hide all elements going under the header.
html
<!-- Fixed navbar -->
<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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 id="home-h1">title</h1>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">navitem</li>
<li>navitem</li>
</ul>
</div><!--/.nav-collapse -->
</div>
css
body {
background: -webkit-linear-gradient(#99DAD2, #FEECA4);
background: linear-gradient(#99DAD2, #FEECA4);
}
.navbar-default {
/* navbar background color */
background-color:transparent;
}

Making Navbar Transparent Bootstrap and Leftover chunks of color

Firstly: I've been trying to make the navbar transparent, looked up how to here, but the solutions haven't quite worked (or at least not as I expected). I'm using bootstrap, this is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-inner">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>FAQ</li>
<li>List</li>
</ul>
</div>
</div>
</div>
</nav>
I added in this custom CSS to change the navbar to transparent:
.navbar-inner {
background: transparent;
background-color: transparent;
border-width: 0px;
}
The CSS loads properly, but nothing changes in the navbar (at least I assumed it would be white, since the browser background is?)
I tried changing the background-color in the above CSS, and it did change it, but I got this result:
I'm wondering, even if I do get it transparent, how do I get rid of that bottom border (thought I set border-width to 0px already), and what are those black chunks on the side.
Thanks!
Use .navbar class insted of .navbar-inner, because Bootstrap has background on .navbar element.
.navbar {
background: none;
border: none;
}
Try using opacity: 0.5; in CSS.
you should try out the new css3 transparent feature "rgba" - the a stands for alpha channel
http://www.css3maker.com/css-3-rgba.html

Bootstrap header/jumbotron background image

I'm messing around with Bootstrap for the first time and was struggling to get an image as the background for a header that included the nav and jumbotron. Currently the image I've set isn't showing up and I'm not sure why. If you could point me in the right direction as to where or what needs to change it would be appreciated.
<div class="container header-bg">
<nav class="navbar" role="navigation">
<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="#">Elliott Davidson</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li>Pictures</li>
<li>Videos</li>
<li>Sponsors</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Elliott Davidson</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
.header-bg {
width:100%;
height:475px;
background: url("img/elliott-davidson-slider.jpg");
background-size:cover;
}
.jumbotron {
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background: transparent;
}
background: url("../img/elliott-davidson-slider.jpg");
By – Yerko Palma
Try adding "background-image" like so:
.header-bg {
width:100%;
height:475px;
background-image: url("img/elliott-davidson-slider.jpg");
background-size:cover;
}

What is the best way to add some space after Bootstrap navbar?

The following code displays a navbar always on the top of the page.
I need the second container (content) to be positioned at the end of the navbar and not under it.
At the moment second container is under the navbar.
I could add some empty space on the top of the content are, but I am not sure it is a good approach.
Any idea how to solve it?
<div class="container">
<div class="row">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<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>
</div>
</nav>
</div>
</div>
<div class="row">
<div ng-view></div>
</div>
</div>
Updated 2018
Bootstrap 3
According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-top on the body..
"The fixed navbar will overlay your other content, unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high."
body { padding-top: 70px; }
Demo: http://www.bootply.com/Ob3Bajkv1f
Bootstrap 4
Padding is also recommended for the fixed-top Navbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-top or use the pt-5 utility class on the body tag:
<body class="pt-5"></body>
You would need some CSS like this:
body {
padding-top: 20px;
padding-bottom: 20px;
}
Or like this:
.navbar {
margin-bottom: 20px;
}
Make sure you only use what you need,
Just add margin-top: 50px; to the underlaying container.
50px has to be the height of your navbar.
I was able to solve this issue using the following code.
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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="#">KanbanBoard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Boards</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>User</li>
</ul>
</div>
</div>
</nav>
<!-- boards -->
<div ng-view></div>
</div>