How can i edit this to be able to see the navbar options. Currently it has the same color as background.I want to change the font before to white and change them when it hover to white background with blue color font.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="tog" style="padding-top:7px; ">
<a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span>
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<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="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span>
</li>
<li><i class="fa fa-suitcase"></i><span class=" glyphicon glyphicon-bell"> </span>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-cog"></i> Account
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out"></i> Sign-out
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
go to your downloaded bootstrap.css file and makes the changes maybe somewhere around line 4489..
change the css of this selector
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
Related
I'm not able to hide the navbar after the link is clicked. I'm using bootstrap 3. I have added the script that should work. I'm not able to find the error. Can someone go through this code. Please
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#topFixedNavbar1" 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>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
According to docs you have to put collapse in class
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
But this is not enough.
I'm not able to hide the navbar after the link is clicked.
Would you like to hide the whole navbar or the menu section which appears on small screen sizes?
If you want the first one you have to put classes in nav tag and use different query in jquery
Example
$(function() {
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide'); // hides menu on lower screens
//$(".navbar").collapse('hide'); // hides the whole navbar
});
})
html,
body {
height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
<div class="container">
<nav class="collapse in navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#topFixedNavbar1" 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>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse in navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
Did you try Something like this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a>
</li>
<li class="nav-link" class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>
Use this in js
$(function () {
$(".navbar-collapse ul li a").click(function() {
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse ul li a").click(function (event) {
$(event.target).focus();
});
});
i am using following nav code in my nav view
<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">
<img src="img/logo.png" class='img-responsve' alt='Transskilks'/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="socialnav">
<li>Home</li>
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Talent Acquisition</li>
<li>Consulting & Advisory</li>
<li>Global Payroll Outsource</li>
<li>Time and Attendance System</li>
</ul>
</li>
<li>Contact</li>
<li><i class="fab fa-facebook-f"></i></li>
<li class="active"><i class="fab fa-twitter"></i></li>
<li class="active"><i class="fab fa-instagram"></i></li> </i></a></li>
<li class="active"><i class="fab fa-google-plus-g"></i></li>
<li class="active"> <i class="fab fa-linkedin-in"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
CSS:
`<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'`>
JS
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
Everything works fine but in mobile view navbar does not open , Can someone help me whats wrong here, i don't find any issues in console for other js files as well.
Try Putting the button outside the navbar itself. Moreover, make sure that there's no mismatch between the data-target of the button and the id of the tag, as the collapsing only works with IDs, not classes.
I am making an example project for my PHP course, I have a sidebar navigation with 2 dropdown menus. Whenever I click on a dropdown button the list items of that menu keep disappearing. You can see the gif below to see what exactly happens.
Click here for the gif
This is the code below, it's only the side navigation. All the other parts like header, footer and content are in other pages and have been included in the index file using include() function of PHP.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li>Visit Website</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
<?php
if(isset($_SESSION['username']))
{
echo $_SESSION['username'];
}
?>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i>
<ul id="posts_dropdown" class="collapse">
<li>
View All Posts
</li>
<li>
Add Posts
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-sitemap"></i> Categories
</li>
<li class="">
<i class="fa fa-fw fa-comments"></i> Comments
</li>
<li>
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
View All Users
</li>
<li>
Add User
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-user-circle-o"></i> Profile
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
Check your script and link tags, it works fine, here a short example of your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i>
<ul id="posts_dropdown" class="collapse">
<li>
View All Posts
</li>
<li>
Add Posts
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
View All Users
</li>
<li>
Add User
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-user-circle-o"></i> Profile
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
If i just shrink down the window in Chrome, the navbar will work as intended, but when i go into chrome's device emulator, the navbar never changes to the toggle button.
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top" style="border:0;background-color:transparent;position:absolute;">
<div class="container-fluid" style="padding: 20px 15% 0;">
<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 page-scroll" href="#page-top"><img class="img-responsive" src="/logo.png"></a>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">
<span>Rewards</span>
</a>
</li>
<li>
<a class="page-scroll" href="#services">
<span>Member Care</span>
</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">
<span>Sign Up</span>
</a>
</li>
<li>
<a class="page-scroll login-btn" href="#login-form">
Log In <i class="fa fa-user"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
You could start by confirming you've set the viewport meta tag in the head of your page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have a menu built using Bootstrap 3.0. It floats to the left and can be re-sized to fit only the icons by adding a css class to it using jQuery's toggle_class(). What I want to achieve is once this menu is toggled to a smaller version, I would like the drop down menu to become a vertical slide out menu.
Here is an example of what I am trying to accomplish http://wrapbootstrap.com/preview/WB0B30DGR If there is a plugin that does please point me to it.
Here is my HTML code:
<div id="wrap">
<div id="content">
<div id="navigation" class="" role="navigation">
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="fa fa-bar"></span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
</button>
<a class="navbar-brand" href="./">CIMP Admin</a>
</div>
<!--SIDENAV
============================================= -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active" ><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown ">
<i class="fa fa-camera"></i> Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-picture-o"></i> Library</li>
<li><i class="fa fa-picture-o"></i> Albums</li>
<li><i class="fa fa-picture-o"></i> Slideshows</li>
</ul>
</li>
<!-- Modules -->
<li class="dropdown ">
<i class="fa fa-puzzle-piece"></i> Modules <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-thumb-tack"></i> Posts</li>
<li><i class="fa fa-cloud"></i> Uploads</li>
<li><i class="fa fa-desktop"></i> Testimonials</li>
</ul>
</li>
<li><i class="fa fa-users"></i> Users</li>
<li calss="active"><a id="toggle-pane" href="#"><i class="fa fa-caret-square-o-left"></i> Hide Menu Bar</a></li>
</ul>
</div>
</nav><!--/ nav -->
</div><!--/ navigation -->
</div><!--/ content -->
</div><!-- wrap -->
<script type="text/javascript">
$("#toggle-pane").click(function () {
$('#wrap').toggleClass("folded");
});
</script>