this is my first post so please be gentle.
I'm trying to create a nav bar using html5 and css and it needs to work with ie8. I have managed to nearly everything i need to done but one thing. i cant make my icons and text to centre align correctly for each navigation button
CSS
.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
background-repeat: no-repeat;
background-position: 0 top;
content: "";
height: 40px;
width: 40px;
margin-right: 10px;
vertical-align: top;
background-color:transparent;
display:inline-block;
float:none;
}
.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.dashboard:before { background-image: url('/VerificationServices/Static/Icons/dashboard.png');}
.navbar-default .navbar-nav>.active>a.about:before,
.navbar-nav>li>a.uploadscv:before { background-image: url('/VerificationServices/Static/Icons/UploadSCV.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.uploaddocs:before { background-image: url('/VerificationServices/Static/Icons/UploadDocs.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.viewrun:before { background-image: url('/VerificationServices/Static/Icons/viewrun.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.selfver:before { background-image: url('/VerificationServices/Static/Icons/selfver.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.selfver:hover { background-image: url('/VerificationServices/Static/Icons/dashboard.png'); }
HTML
<!-- Fixed navbar -->
<div class="navbar navbar-default 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="#">Norges Idrettshøgskole</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Upload SCV File</li>
<li>Upload documents</li>
<li>View run results</li>
<li>Self verification</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
here is your updated and working fiddle :
http://jsfiddle.net/553n0udw/1/ Updated Fiddle
i am using glyph-icon, you can use anything you just need to make a class for you custom icon and give it a background url. follow the bootstrap icon rules that will help a lot.
Related
Does anyone know how I can use an image as a nav bar,
I want to use my logo as a button so that when users click on the logo, a drop down menu appears that fills the entire page.
Currently I have a burger Tab and am implementing the drop down menu like so
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}
Since you said you're fine with using JavaScript.
Add the following code to your HTML document:
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add:
display: none;
And your JavaScript could look something like the following:
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}
Your html had some small errors. It should have been like this
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
If you encounter any trouble just tell us
When I make the window smaller, I can still click on where the hamburger icon should be, and the dropdown drops and it works, but there is NO icon for the hamburger (aka the 3 little lines) any help would be awsome!
<nav class="navbar navbar-fixed-top">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">GroupWrites</a>
</div>
<!--Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Explore</li>
<li>Publish</li>
<li>Library</li>
<li>How It Works</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if(!currentUser){ %>
<li>Create Account <i class="fa fa-user-plus"></i></li>
<li>Log In <i class="fa fa-user-circle"></i></li>
<% } else { %>
<li>Signed In As <%= currentUser.username %></li>
<li>Log Out <i></i></li>
<% } %>
</ul>
</div>
</div>
</nav>
CSS
body { font-family: comfortaa; padding-top: 90px; line-height: 1.75 }
.navbar{ background-color: #3c3d41; color: white; padding: 5px; }
.navbar li a:hover,
.navbar li a:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
.navbar-brand:hover,
.navbar-brand:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
a { color: white; }
#button { background: rgb(100,149,237); color: white; }
That is my navbar code. It is in my header and everything works perfectly, I just cannot actually see the hamburger icon itself. Any help would be amazing. Please and thank you. Seems like something very easy that I quite cant put my finger on.
So I got it to work , by changing the class from "navbar navbar-fixed-top" to "navbar-inverse navbar-fixed-top" still not sure why this is though. With navbar-inverse my hamburger icon-bars display. So I just customized .navbar-inverse to my same colors and css as I wanted.
It is not a duplicate of this. That question is about replacing the text logo with image. This question is about placing an image in addition to the text logo.
I have the following bootstrap code that attempts to show the site logo followed by its name. I am using the bootstrap class navbar-brand to do so:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="./EnterpriseCopy_files/android-icon-48x48.png">
</a>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
</div>
<div class="navbar-collapse collapse">
The logo ends up looking like this:
I then have to add style="margin-top:-13px" to the img tag in order to push up the image and make it look good:
This can't be the right way to do this. Is there a better way of doing this?
The original code here, one with the style tweak here.
The problem is with .navbar-brand having padding:
padding: 15px 15px;
It is in bootstrap's default style. So remove that and give:
.navbar-brand {padding: 0;}
You are all set. See the screenshot, where I gave padding: 0; to see it work:
If want to add both an image and text inside the navbar-brand class instead of separating them, apply display: inline-block to your img and then adjust the padding for navbar-brand itself to accommodate everything.
.navbar .navbar-brand {
padding: 2px 15px;
}
.navbar .navbar-brand img {
display: inline-block;
}
See working Snippet.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Carousel */
.carousel-caption {
z-index: 10 !important;
}
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
#media (min-width: 768px) {
.carousel-caption {
z-index: 10 !important;
}
}
/**ADDED CSS**/
.navbar .navbar-brand {
padding: 2px 7.5px;
}
.navbar .navbar-brand img {
display: inline-block;
}
/**ADDED CSS**/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Mailbox
</li>
<li>Copy Groups
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>bar#foo.com
</li>
<li>Sign Out
</li>
</ul>
</div>
</div>
</div>
For me, setting class d-inline-block and align-middle on both anchor elements worked. I'm using bootstrap 4.3.1.
I have set up custom
I have set up a new breakpoint so that the mobile menu appears at 1200px with the following css:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
the issue is that when I get to that breakpoint the mobile menu always collapses and never reveals,
Here is the markup:
<nav class="navbar navbar-inverse a-1-navbar a-1-navbar-shadow" role="navigation" id="a-1-main-menu">
<div class="container">
<div class="navbar-header a-1-navbar-header">
<button type="button" class="navbar-toggle a-mobile-toggle" data-toggle="collapse" data-target="#a-menu" style="float:left;">
<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 a-1-logo-wrapper" href="#" style="float:right;">
<img class="hidden-xs a-1-logo" src="life.png" alt="">
<img class="visible-xs a-1-logo" src="life.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="a-menu" >
<ul class="nav navbar-nav navbar-right a-menu-bar">
<li class="active"> Vehicles <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Specials <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Finance & Insurance <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Servicing <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Parts <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Contact <span class="glyphicon glyphicon-chevron-down"></span></li>
</ul>
</div>
</div>
Is some custom JavaScript needed?
I've tested your code and there's no problem in revealing collapsed items.
Perhaps you should check the following thing first:
Did you include jQuery?
Did you include Bootstrap3 js resource?
Did you include collapse plugin in your Bootstrap3 js resource?
For Bootstrap3 you need to add more lines in your css
While there's no problem hiding collapsed items, it DOES have problem when showing the dropdown list. The problem is you miss out this:
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
Here's the example on Codepen.
I am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brand but not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
This is driving me crazy!!!
The Code:
.navbar-floating {
background: black;
color: #5b5656;
width: 100%;
border-radius: 0;
}
.navbar-floating .navbar-brand {
color: #810000;
font-size: 20px;
text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
content: ' | ';
color: #810000;
position: relative;
top: -3px;
}
#floating-nav {
position: fixed;
/* display: none; */
top: 0;
width: 100%;
height: 50px;
}
#floating-nav.navbar {
min-height: 1px;
}
#floating-nav ul li a {
font-size: 20px;
}
#floating-nav ul li a:hover {
background: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hidden-nav">
<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 scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agency</li>
<li>Capabilities</li>
<li>Projects</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
What am I doing wrong? Any help is much appreciated.
Just add a navbar-default class to the div wrapping your <ul> element like this:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
Try using .navbar-dark as
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
For me, the solution is really annoying
change navbar-expand-sm to navbar-expand-lg in side <nav class=
It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}