I have this navigation here:
<nav class="navbar navbar-default">
<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="index.html"><h1 class="logo"></h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<span style="color:#FFF; font-style:italic; line-height:66px; padding-right: 10px; font-size:12px; float:left;">In The Heart Of Niagara's Historic Wine Country</span>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Rooms</li>
<li>Amenities</li>
<li>Breakfast and Dining</li>
<li>Discover Our Region</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
and this looks fine on Chrome and basically everywhere except for IE 11
Here is what it looks like in chrome:
And here is what it looks like in IE 11
My issue is, I am unable to reproduce this in my IE 11 but my clients IE 11 looks like the second image. How can I fix this?
Here is the CSS:
.navbar-nav {
float: left;
margin: 0;
height: 70px;
}
.navbar-nav>li {
float: left;
height: 70px;
}
Check your file if it follows html5 structure.
<!DOCTYPE html> - is very critical, current best practice is in the first line of type HTML document.
HTML5Shiv - to enable styling of HTML5 elements in versions of Internet Explorer.
Bootstrap version - please make sure you are using the latest version of the framework.
Compatibility mode IE11 - if you are running compatibility mode, turn it off.
Related
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!
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;
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).
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
I past over an afternoon to search an answer at my issue. I'm still blocked with that. I'm unable to change the height of the navbar in my /dist/css/bootstrap.css file.
I found a lot of topics who deals about this problem but any of them allow me to pass through my problem.
I have the feeling that any modifications I've done in my bootstrap.css do nothing. But when I tried to remain the script who include bootstrap in my index.php this does a major effect, so I know that bootstrap is successfully loaded.
Then I tried to modify some lines in bootstrap.css in order to test what does effect :
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {min-height:28px !important;}
I changed the height value.
The div class I use in my html code :
<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="index.php">Medieval Fields</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
What I load in my head :
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
CSS.
Use the C. The Cascading portion of the acronym refers to the fact that linking another style-sheet after bootstrap will overwrite the bootstrap values.
As Abhitalks pointed out. Sorry just saw that.