Slight gapping between navbar border - html

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!

Related

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;
}

Bootstrap Fixed Header items not coming on Mobile

I am working on creating a website using Bootstrap 3. The header is fixed both on laptop and mobile. But the items in the header are not showing up on mobile. Just a clean fixed header can be seen on the mobile device.
The Code I am using for the header is -
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container myContainer">
<div class="navbar-header">
<div class="collapse navbar-collapse mynavbar">
<ul class="nav navbar-nav myFont" >
<li>Values</li>
<li>Community</li>
<li class="mylogo"><img src="images/xyz-6.png" alt="" width="160px" height="50px" id="Logo"/></li>
<li>abc</li>
<li>Who are we</li>
</ul>
</div>
</div>
</div>
</nav>
And the customed CSS used is -
.mylogo{
margin-top : -15px;
}
.navbar-nav>li>a{
color: #000 !important;
font-size: 20px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.navbar-nav>li{
padding: 5px 20px 5px 40px;
}
You can remove the collapse to show the whole menu on mobile, but you missed the mobile navbar menu button to have a proper mobile menu. See the Bootstrap documentation for more info and this Bootply link for a demo.
In short, add this code to your .navbar-header div:
<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>
<div class="collapse navbar-collapse mynavbar">
Remove two classes from this div (collapse and navbar-collapse).

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;
}

Bootstrap collapsed navbar disappears

When I click on the toggle on my mobile page, the menu pops up for a brief moment and disappears again. Only the first item remains visible.
I took the css from thebootstrapthemes and basically just changed the colors and the content of the menu.
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img src="#"></a>
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">Home</li>
<li>Pronunciation</li>
<li>Downloads</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice, how I can get my menu back?
This is my site
.navbar-nav {
margin-right: 0px !important;
height: 51px;
}
The 51px height is limiting your collapsible nav to show entirely.
** Not related to your question **
When using Bootstrap don't use row outside a container div since it will cause unnecessary horizontal scrollbars to appear.
Check your HTML for this element: #home #banner .centered .row. It's showing a scrollbar on my browser.