How can I associate the background image to my navigation bar? I tried my best to associate it but I failed. Do you have any tutorials or tips how can I make it?
Here's my index
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav><!--End of navbar-->
<!-- start of picture div-->
<div id="bgp">
<h1 id="top-header">
</h1>
</div>
Here's my CSS:
#bgp
{
background-image: url("images/city.png");
opacity: 0.8;
width: 100%;
height: 100rem;
background-size: 100%,500%;
background-repeat: no-repeat;
}
Alright here you go : https://jsfiddle.net/d7uamo66/
Basically the header has NO image but is transparent.
If you scroll down the header transparency changes to white.
Related
I'm creating a responsible navigation bar using Bootstrap. Now it looks like:
in expanded view, and:
in collapsed view.
In the normal view it looks okay, however in collapsed view I'd like to keep in the bar Sign Up links and not to have it in the collapsed list. Something like this (this screenshot was created in graphical editor):
This is my code:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
Fiddle: https://jsfiddle.net/aqgtmy6w/4/
I found this post but collapsed list there is broken, some links shifted left and right.
How can I achieve keeping some links in navbar on collapsing, and how to exclude them from list (so that not to duplicate them)?
Just put the sing up link inside <div class="navbar-header"> and add class="navbar-brand pull-right" to your sign up link. That's it.
Working Snippet
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#media(min-width:768px){
#sm-view {
display:none;
}
}
#media(max-width:767px){
#lg-view {
display:none;
}
#sm-view {
font-size: 14px;
}
}
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">WebSiteName</a>
<a id="sm-view" class="navbar-brand pull-right" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="lg-view"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
To have same styling as the nav-links and not like the navbar-brand just add this--- #sm-view {font-size: 14px;} to your media query #media(max-width:767px).
I have a navbar like the one below:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
with CSS:
#media (max-width:768px) {
.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
.navbar-default .navbar-collapse {
background: #eeeeee;
position: absolute;
width:100%;
top: 40px;
}
}
The navbar works properly on larger screens. The mobile screen is the problem. It works properly when used in desktops (i.e I have a mouse to click the links). However, when used using mobile devices (i used an iPhone), the links of the navbar are not working anymore. What's more, I cannot toggle the dropdown button anymore once I've clicked on something.
If it helps, here's the codepen link: codepen
EDIT: I found out now that the navbar is not working when I am using Safari on my iPhone. When viewed in Google Chrome it works just fine even if in mobile. Any ideas as to why it is not working in Safari? Thank you for your help.
Try updating your code with a wrapper div.
.nav-wrapper{
position: relative;
display: inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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 class="nav-wrapper">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
</nav>
I would like to know how to make an image fit bootstrap navbar height (proportionally), here's a descriptive image:
Any idea?
I'm using this structure:
<nav class="navbar navbar-default">
<divclass="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.
In this example, the image will cover it's part of the navbar completely.
See working Snippet.
body {
padding-top: 70px;
}
.navbar.navbar-inverse {
border: none;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.navbar .navbar-brand img {
height: 50px;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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" href="#">
<img src="http://placehold.it/350x150/f00/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<img src="http://placehold.it/350x150/f00/fff" />
<h4>The Same Image At Full Scale</h4>
</div>
in a previous project of mine I also encountered some issues with this. Here is how I solved the problem:
HTML:
<nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="index.html" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>
<a>Menu Item1</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And the CSS for it:
.navbar-fixed-top {height: 40px;}
.navbar-brand img {height: 40px;}
So setting the navbar and the logo-image to the same height (and not giving it width, thus it will be automatically adjusted) solved the problem for me with good positioning. Two possible cases:
you want a fixed navbar:
.navbar-brand img {position:fixed;right:0;top:0}
you want a header on top:
.navbar-brand img {position:absolute;right:0;top:0}
In both cases I set it to top-right corner of the site, but you can adjust that easily. So the key is: same height navbar and image, with the image positioned well. (Then margin-padding or exact position of the image can easily be set in CSS)
Hope it helped,
Andrew
EDIT: Regarding fixed navbar please check the Bootstrap documentation (it has built-in class like navbar-fixed-top and such).
I'm trying to make my navbar semitransparent on this code but I'm not able to do it:
<nav class="navbar navbar-default navbar-fixed-top transparent" >
<div class="container">
<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="#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>
<a class="navbar-brand" href="/">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Searches</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Legal <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Terms</li>
<li>DMCA</li>
<li>RTA</li>
<li class="divider"></li>
<li>Contact</li>
Try this in your code, it worked for me -
give an id to the nav
like this-
<nav class="navbar navbar-default navbar-fixed-top transparent" id="nav1">
Then apply this in your css-
#nav1
{
background-color:#F00; /*whichever you want*/
opacity: 0.5;
filter:(opacity=50);
}
in your bootstrap.css find the navbar you are using, for example, if you're using the default navbar search for .navbar-default or .navbar-inverted as per your case and set the opacity simply using the CSS opacity command.
Did the job for me.
It would be nice to see the orginal CSS.
Paste the css code that shows the opacity.
The way I see your problem I think you did not write the path correct enough so it doesn't overwrite the original css from bootstrap.
<div id="wrapper">
<div class="container">
<div class="nav">
<p>tessssssssssssssst</p>
<div>
</div>
</div>
#wrapper .container .nav{
background-color: red;
opacity: 0.3;
}
#wrapper .nav {
opacity: 1.0;
}
http://jsfiddle.net/7h4hrvhu/
I am trying to add a Twitter logo to my header (I use Bootstrap CSS) but it's screwing up the alignment. I was trying to put them side by side, but instead it shoved them beneath. Here was my first attempt:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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 csh-top-link" href="index.html">Cardshifter</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">#Cardshifter</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
This is how it renders:
This was my second attempt using <div> instead of <ul>:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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 csh-top-link" href="index.html">Cardshifter</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<div class="nav navbar-nav">
<img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">
</div>
<div>
#Cardshifter</li>
</div>
</div><!--/.nav-collapse -->
</nav>
That seems like a slight improvement, as in they are separate elements (note the light blue contour on the right only appears in my Brackets live preview, not on the actual rendition):
I have tinkered around with CSS margin and padding on both the <ul> and <div> versions with no apparent improvement. If you wish to see the code in context, it is currently hosted on Github until a solution is found. The desired layout is side by side:
[Cardshifter] | [Twitter logo] | [#Cardshifter]
You can do simple alignment of list-items with a … list!
HTML:
<ul class="navbar">
<li>
Twitter logo here
</li>
<li>
Twitter handle here
</li>
</ul>
CSS:
.navbar {
/* Just a little housekeeping … */
list-style: none;
margin: 0;
}
.navbar > li {
display: inline-block;
}
#kleinfreund got the correct solution, however a bug was pointed out as a comment to the question, which (combined with the accepted answer) completely fix the problem:
correct answer is below, also what up with the percentage inline
widths on the image? That's a whole lotta bad going on there. Dump the
inline styles, don't use percentages for widths on a bitmap image, use
the exact pixel size and use the HTML height and width attributes. –
Matt Lambert 3 hours ago
So I changed the code to this and it work completely:
<div id="navbar" class="collapse navbar-collapse">
<ul class="csh-twitter nav navbar-nav">
<li>
<img src="images/logos/Twitter_logo_blue.png" style="height: 25px; width: 30px; margin-top: 10px;">
</li>
<li>
#Cardshifter
</li>
</ul>
</div><!--/.nav-collapse -->
Rendering: