i created with bootstrap an "easy" navigationbar. Now the navigationbar overlay the text. I tried to give the .navbar a margin-bottom of 50px, with no result. Here is the Page and here the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seite</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/meine.css" rel="stylesheet">
</head>
<body>
<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="#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="#">Startpage4you</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Anmelden</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2">.col-md-4</div>
<div class="col-md-8">.ccol-md-8</div>
<div class="col-md-2">.col-md-4</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
my stylesheet
.navbar{
margin-bottom: 50px;
}
Because your navigation bar has a fixed property, everything else will appear underneath it, and pushed up to the top of the page.
So you just need to add margin-top:51px to your div 'row', in order for it to be seen.
What I would do though, is put the div class row inside a container, and then apply the margin-top to the container. Then you can use that for subsequent pages.
Since you are using a fixed navbar, you need to add padding to your body just like the bootstrap docs say:
body {
padding-top: 70px;
}
http://getbootstrap.com/components/#navbar-fixed-top
Related
Ok,i made header and logo :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="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="#"><img src="images/test1.png" class="img-fluid"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.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>
</body>
</html>
and CSS:
.navbar-nav {
min-height: 110px;
}
.navbar-brand img {
max-width: 100%;
height: auto;
}
The question is how to my logo image be responsive as I resize the browser and how to header be responsive(when decrease size)? As you can see I put height in external CSS file 110px,and now I want to logo enter inside header(like in full size browser) when resize into small screens. I hope you get it
To keep your header image inside your header at all times you can simply apply max-height: 100%; to your image. This will stop it from overflowing its container. Here is an example: https://jsfiddle.net/rktr4q5v/1/
You can see that the images are both quite small. This is because the class navbar-brand has a height of 50px applied. If you remove this then your images will expand to their original width but remain inside the navbar. Here is an example of this: https://jsfiddle.net/rktr4q5v/2/
If you need to do specific size styling for your logos then you will need to use media queries to change the size of your logo at different screen widths. The documentation for this can be found here and a beginners guide can be found here
I have also fixed some of your mistakes. You can refer this.
Adjust your Logo Size in navbar-brand style tag. If requires
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<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="#"><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" class="img-responsive img-rounded" style="max-height: 40px; margin-top: -15%;"></a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.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>
</body>
</html>
I'm still somewhat new to this and none of the proposed solutions seem to be helping me. Since I'm using jinja2 as templating language it's a little difficult to show the code, so I'm displaying the entire page source.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Record Scrobbler</title>
<link rel="icon" href="/static/img/favicon.ico">
<!-- Bootstrap -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 70px;
margin-bottom: 10px;
}
.footer {
position: absolute;
bottom: 0;
/* Set the fixed height of the footer here */
height: 80px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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="/">Record Scrobbler</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Collection</li>
<li>Explore</li>
<li>Add Record</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="'container">
<div class="row" id="row_1">
<div class="col-md-12" id="image_1">
<img src="/static/tmp_viz/bar.png"
style="width: auto; height: auto; float: right">
</div>
</div>
<div id="footer" style="white-space: nowrap">
<div class="container text-left">
<footer class="footer">
<p>© Boudewijn Aasman.</p>
<div class="nav3" style="height:705px;">
<a href="https://github.com/baasman" class="icons"><img src="/static/img/Octocat.jpg"
style="width:50px;height:50px;"></a>
<img src="/static/img/lastfm_red_small.jpeg">
</div>
</footer>
</div>
</div>
</html>
The 'bar.png' image gets cut off on the left side. What could I do to resolve this? I assume it has something to do with the padding I had to do to get the navbar and footer showing correctly, or that is is overflowing somewhere on the bootstrap grid.
EDIT:
The image:
Dimensions: 516x366
Screenshot of page:
EDIT:
So I don't think this was a html or css problem, but rather a matplotlib problem.
sns.set_style('white')
fig, ax = plt.subplots(2, figsize=(8, 6), sharex=True)
counts_per_artist = df.groupby('Artist').TimesPlayed.sum()
counts_per_artist = counts_per_artist.sort_values(ascending=False).head(10)
index_artist = np.arange(len(counts_per_artist))
counts_per_album = df[['Title', 'TimesPlayed']].sort_values('TimesPlayed', ascending=False).head(10)
index_title = np.arange(len(counts_per_album))
bar_width = .35
rects = ax[0].barh(index_artist, counts_per_artist, alpha=.4, color='green',
label='Artists', tick_label=counts_per_artist.index,
align='center')
rects2 = ax[1].barh(index_title, counts_per_album.TimesPlayed, alpha=.4, color='red',
label='Records', tick_label=counts_per_album.Title)
ax[0].legend()
ax[1].legend()
plt.gcf().subplots_adjust(left=0.4)
fig.savefig('/Users/baasman/PycharmProjects/pyvinyl/static/tmp_viz/bar.jpeg',
bbox_inches='tight')
Just changing it from png to jpeg seems to have fixed this issue, but I have no idea why.
This question already has answers here:
twitter bootstrap navbar fixed top overlapping site
(19 answers)
Closed 6 years ago.
Can anybody tell me why I can not see the text under my navbar. Is it hiding it? I have set the navbar as fixed. Is this the issue?
I am trying to add a header underneath but I can't even see the text.
Thanks in advance
Reece
<!DOCTYPE html>
<html>
<head>
<!-- LINKS TO EXTERNAL FILES (BELOW) -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slyderesp.css">
<title></title>
</head>
<body>
<!-- NAVBAR (RESPONSIVE) -->
<nav class="navbar navbar-inverse 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="#">Slyde</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Meet The Band</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--HEADER (RESPONSIVE)-->
<div>WHY CANT I SEE THIS?</div>
<!--LINK TO EXTERNAL FILES (BELOW) -->
<script type="text/javaScript" src="js/slyderesp.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Your navbar has the class .navbar-fixed-top which makes it fixed in the browser window. Your <div> is just below it. Remove that class or add some padding to your body.
I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.
The Number 1 image is an example code. There is good.
Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)
Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
According to bootstrap documentation The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.
CSS:
body{
padding:70px;
}
or
Place your content in the jumbotron container like in the image1 and remove the background-color of the jumbotron with your own css
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
In the example link you provided, the image 1, it has a container called jumbotron which has padding 60px; that is the reason the contents are not hidden under the navbar
Demo
Maybe this solution wil be helpfull
JSFIDLE
UPDATE:
Smarties way will be to add new class with row div so your bootstrap css stay untouched.
.row-withmargin{
margin-right: -15px;
margin-left: -15px;
padding-top: 70px;
}
I am trying to make a collapsable navbar with bootstrap, the nav does collapse but when I click on it it does not dropdown here is all the code I have in my index html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Honk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="public/stylesheets/styles.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="public/stylesheets/custom.css">
</head>
<body>
<nav class="navbar navbar-fixed-top 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>
<img class="logo" src="public/images/honklogoo.png" alt="">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="discrip" href="#">About</a></li>
<li>Commuters</li>
<li>Travelers</li>
<li>On Demand</li>
<li>Safety</li>
<li>Download</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
you dont have the the bootstrap js script in your html (you just have the css)
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
its working here: http://jsfiddle.net/swm53ran/26/
btw, make sure you put it after your jquery script since bootstrap is dependent on jquery