I am currently using the Bootstrap 3 framework to create a prototype, I have a logo image in my header of my website that doesn't seem to be resizing at all. I have given it the image-responsive class but it doesn't affect it.
I think the column may not be holding the image content. I have created a fiddle (with a sample header image off google)
http://jsfiddle.net/pocockn/52VtD/10157/
<!-- navbar and logo -->
<div class="navbar navbar-default" role="navigation">
<div class = "row nav-row">
<div class="col-md-10">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src ="http://slant.investorplace.com/files/2013/08/pandora-stock-logo.png" class="img-responsive"></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> <!-- end of col md 8 -->
<div class="col-md-2">
<div class="navbar-collapse collapse">
<ul class="nav nav-stacked">
<li>ROOMS</li>
<li>PROFILE</li>
<li>CONTACT</li>
</ul>
</div> <!-- end of col md 4 -->
</div><!-- end of row -->
</div><!-- end of container -->
Thanks!
Demo Try This
I Added class "logo" to img tag and "remove_pad" to a tag
.logo{
width:100%;
height:100%;
}
.remove_pad{
padding:0px !importnat;
}
One way is to override directly your img with css :
Fiddle : http://jsfiddle.net/62uz5odq/
.navbar-brand > img {
width:auto;
height:100%;
}
Related
I am using Visual Studio 2017 with the built in MVC template, I added to bootstrap.css to create a navbar that is along the left side of the screen on sm/md/lg and across the top on xs. The navbar looks like so
<div id="sidenav" class="col-xs-12 col-sm-3 col-lg-2 navbar navbar-default navbar-fixed-left nav-stacked">
<div class="col-xs-12 container">
<!--Header-->
<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>
#Html.ActionLink("Menu", "Index", "Home", "Home", new { #class = "navbar-brand" })
</div>
<!--Content-->
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Elements</li>
</ul>
</div>
</div>
I added to bootstrap.js the following and made no other changes:
$('.navbar-nav li a').click(function (e) {
$('.navbar-nav li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
The problem seems to be with the e.preventDefault(), if I include it, the active list item will change, but navigation doesn't happen. If I remove it, the active item will clear, the clicked item will change color, navigation happens, but then the correct link will go back to normal and the original active link is active again.
Probably something small and stupid but what do I have wrong or what am I missing, thank you.
I have a vertical navbar that becomes collapsible when viewed in mobile devices. I want my users to continue to see the navbar even after they scroll, and only have it close by clicking on an item or on the nav toggle.
I've tried the following (from a post on stack overflow :) ) :
$('.sidebar-navbar-collapse').on({
"show.bs.collapse": function() { this.closable = false;console.log('in show nav'); },
"click": function() { this.closable = true; console.log('in click to hide nav'); },
"hide.bs.collapse": function() { return this.closable;console.log('in hide nav, closable:', this.closable); }
});
But while I see the output for the shown & click, I don't see it for the hide event when it is closed by scrolling.
HTML:
<div class="col-md-4 col-sm-4 sidebar-nav">
<div class="navbar" role="navigation">
<h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;">Topics</h1>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Topics</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE">
<li>
Privacy
</li>
<li>
Report
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Here is a js fiddle:
https://jsfiddle.net/bv773t0a/
Thank you!
Rightly pointed out by #Karan3112
You have something conflicting with Bootstrap Javascript within your main.js. Try:
jQuery(".collapse.navbar-collapse.in").removeClass("in");
This is original image I want result to like this:
My code pen like:
ul.ul_menu_parent li:hover {
color: orange;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid header">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="col-md-10 col-sm-12 col-xs-12">
<div class='text-right'>
<span class="module_top"> <b class="phone">+ 84 862 890 890</b></span>
<span class="module_top">Login / Register </span>
</div>
<nav class="navbar navbar-default nav_parent" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ul_menu_parent">
<li style="margin-top: -5px"><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
<li>INTRO</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
It only hovers like this:
You can see the color green I only hover the awesome icon element; I can't hover to image show in parent div.
Your css needs to add like this:
ul.ul_menu_parent li:hover i {
color: orange;
cursor: pointer;
}
if you want to background color change on hover. use this css code:
ul.ul_menu_parent li:hover {
background-color: orange;
cursor: pointer;
float:left;
display:block;
}
you need to remove margin-top:-5px in li.
I added your code in jsfiddle please check this :
DEMO
So here is my HTML:
<div class = "nav">
<div class = "top_page">
<h1 class = "mainTitle">title</h1>
<p class = "slogan">Slogan</p>
<br/>
</div>
<div class = "container">
<nav class="center-links">
<a href="/about" class = "content" >About</a>
<a href="/projects" class = "content" >Work</a>
<a href="/recruit" class = "content" >Contact</a>
<a href="/recruit" class = "content" >Recruit</a></li>
</nav>
</div>
<br />
<br />
</div>
and my current CSS for it (screens width over 808px):
.center-links {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
.center-links a {
display: table-cell;
background-color: #212A5C;
border: 1px solid #212A5C;
color: #FA3400;
font-weight: bold;
padding: 1.5%;
text-transform: uppercase;
}
.center-links a:hover {
background-color: rgb(230, 230, 230);
transition-duration: 0.7s;
}
With what CSS/jQuery/Javascript code can I collapse this menu in a Bar Icon from awesome fonts that will display the link with a click?
Thanks! Not using bootstrap
If you are using bootstrap than you need to use this markup to do what you want:
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation">
<input type="hidden" id="pagesNr" value="2"/>
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
Company Name
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav scroll-nav" id="sortableMenuItems">
<li">
Home
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
<li>
Menu 4
</li>
<li>
Menu 5
</li>
</ul>
</nav>
</div>
When you see this menu in small devices it will be collapsed showing the 'hamburger' icon on the right side.
To answer your reply I have updated this, so to use bootstrap you need to put in the 'head' tag of your HTML page the following:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
The work around of this using your code is to make an hidden dropdown menu which will appear when the browser will be resized at a certain defined width, and for this you have to use #media queries. But I really believe that this is not the option you have to follow.
I'm using angularJS along with bootstrap 3.2. I use navbar with some items.
The default behavior with bootstrap is when collapsed occurs then the same those items from navbar can be shown in dropdown panel if click on the newly appeared button.
How can I show different items in dropdown panel when in collapsed mode.
I would like to use as much built-in functionality as possible in both angularJS and bootstrap, and minimize hacks and workaround.
<nav class="navbar navbar-default navbar-fixed-top" ng-controller="HeaderCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button id="collapse-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="logo left navbar-brand">
<a href="#!/main">
<img src="logo.png" />
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ng-cloak>
<div class="navbar-avatar clearfix flLeft">
<img src="avatar.png" title="" />
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
For example I want this "avatar.png" to be show differently (for examle in circle or in rectangle) if it is on the navbar or shown by clicking on the collapsed button.
You use the css media query:
.buttons-i-only-show-when-collapsed {
display: none;
}
#media (max-width: 767px) {
.buttons-i-only-show-when-collapsed {
display: block;
}
}
.hide-only-if-collapsed {
display: block;
}
.show-only-if-collapsed {
display: none;
}
#media (max-width: 767px) {
.show-only-if-collapsed {
display: block;
}
.hide-only-if-collapsed {
display: none;
}
}
With minor modifications accepted answer works
just add .hidden-xs at the div you want to hide
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row hidden-xs">
and visible-xs the div you want to show
<div class="row visible-xs">