When I try to scroll with my fixed navbar code the bar breaks up into only the boxes for the links and it covers the page title, how do I fix this? All my code is in a pastebin as it would have been too long to post directly on here.
http://pastebin.com/CBvGcKT4
My approach would be to push padding-top to the body.
The nav block is fixed, so it doesn't 'physically' interfere with anything, which means it will not push your content below it.
I see you are using jQuery, so we can use it:
<script type="text/javascript">
$(document).ready(function() {
var navHeight = $('#nav').height();
$('body').css("padding-top", navHeight);
});
</script>
Getting the height and passing it trought the body's padding-top everytime after page load, is a fail-safe solution, so if your menu elements are more and the menu has two or more rows of them, the content will follow right after.
For this solution to work properly you need to remove the fixed heights you put in:
#nav, .fixed-nav-bar {
height: auto;
}
and let them do the magic themselves.
First you should fix your code.You set h1 and nav inside head tag and that is wrong, it should go inside body.To check what elements go inside head tag visit this page: http://www.w3schools.com/tags/tag_head.asp
So after you put that code inside body check bootstrap documentation as it already have class for fixed navbar and here you write your own.
Then I suggest to put h1 title below navbar, not above as it is now, so that code matches visual placement of elements.
And also, like it is said on bootstrap documentation for fixed top navbar, you should add padding-top to your body if you use .navbar-fixed-top.
By default navbar is 50px high but because you increased it then add more padding-top to body.
Also your links look like this:
<li>What Are Drones</li>
In most cases this will not work so you should remove spaces from html file name. Like this for example:
<li>What Are Drones</li>
This code will perfectly work for you.
Happy Coding :-)
#charset "utf-8";
/* CSS Document */
#TITLE {color: #1762a1; font-family: "Cuprum", sans-serif; font-size:80px;}
.navbar-nav li a{color: white ! important; font-family: "Cuprum", sans-serif; }
.navbar-brand{color: white ! important;}
BODY{PADDING-TOP: 50px;}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drones</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.4/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Cuprum:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="btt index.js"></script>
<link rel="stylesheet" href="indexCSS.css" />
<nav 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="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Kittatinny's Drone Information</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>What Are Drones</li>
<li>How Drones Work</li>
<li>Buying a Drone</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<h1 id="TITLE" class="text-center"> Kittatinny's Drone Information</h1>
</head>
Related
I'm not sure why this is happening. The tag that is the title "Don't Be Square" is in the nav bar, but not the links. What am I missing here in the CSS or the HTML that will bump it up inside there? enter image description here
I think, you have header "Don't Be Square" after that you are righting code for Nav bar. And you wanted to bring your nav bar top right. To do so, you can right css for your title.
use float: left; there other way also you can acheive, for that you have to share the code.
Hope it will help you.
It would help if you posted some of the source code along with it. The only thing that I can potentially think of by just the image is that you are using some sort of header (h1, h2, etc) followed by some other tag that isn't inline (div, p, etc). Since both are block that could be why it displays on the line after. If this is the problem, a tags are inline so simply putting the tags within the body of the h1 could suffice such as
<h1>Don't Be Square <a some link here/> <a another link/> <a third link></h1>
and then styling the links differently from the h1 by giving them an id or using the css identifier
h1 a{ your styling here}
Again I can't help much because there is no source but hopefully this helps.
This is just an example you may follow it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Don't Be Square</a>
</div>
<ul class="nav navbar-nav" style="float: right;">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
View it in full screen if not the navbar will wrap. Good luck
I am a beginner when it comes to website design. How do I get rid of the whitespace between my jumbotron navbar and footer?
There is whitespace between the jumbotron and the following Navbar aswell as the following footer thereafter. Attached is the following jsfiddle> https://jsfiddle.net/5c6kx9tu/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mj.css">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Quotes</li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</body>
And here is the css
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin-bottom: 0px;
}
.footer{
margin: 0px;
background-color: grey;
bottom: 0px;
padding: 20px;
}
.text-center{
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
I'd strongly recommend not modifying core bootstrap styles, but rather utilizing some helper classes.
If you're using Bootstrap 3 (which you are loading in your code), you'll need to write some helper classes, like I've done in this fiddle, and below:
CSS helper classes (you can add other - mt (for margin top), 5em (for .5 em), etc:
/* helper class, modeled after Bootstrap 4 helper classes */
.mb-0 {
margin-bottom: 0 !important;
}
Then simply add those classes to your markup, like below:
<body>
<div class="jumbotron mb-0">
</div>
<nav class="navbar navbar-default mb-0">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Quotes</li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</body>
Working example / fiddle: https://jsfiddle.net/cale_b/0gn7w3Lk/1/
If you're using Bootstrap 4, those helper classes already exist, and you can use them: https://v4-alpha.getbootstrap.com/utilities/spacing/
If you add
.navbar {
margin: 0;
}
That should clear it up. Play around with that.
Make sure you add that somewhere AFTER your include of the bootstrap style sheet, so it overrides the bootstrap css.
To remove the whitespace between jumbotron and navbar, all you need to do is calling your stylesheet below the bootstrap stylesheet. And then, in your stylesheet, you need the following lines to remove the whitespace between navbar and footer:
.navbar {
margin-bottom: 0px;
}
In my opinion, it's better not to change bootstrap own classes, make your owns classes or id's instead.
Also keep in mind where you are going to add css, it's better add css after bootstrap otherwise you could change bootstrap logic. This means you could generate unwanted behaviors.
Here just an example adding id's: https://jsfiddle.net/5c6kx9tu/5/
#myJumbotron{
margin-bottom:0px;
background-color: red;//this color it's just to see the problem clear
}
#myNavbar{
background-color: green;//this color it's just to see the problem clear
margin-top: 0px;
}
The best solution then, in my opinion, is to make another file included after bootstrap and make your own classes for the elements that you want to change.
For example in: https://codepen.io/SimpleRoger/pen/OmRKNq
The nav bar is vertical not horizontal; please help.
<html>
try run these code please
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>
Bootstrap is a responsive site framework (sorry i don't know to call it, all i know is that bootstrap generate a responsive websites). So it will automatically detect how long is the height, width the browser displaying the websites. if the display height and width is this much bootstrap will display a web page like this, if the display height and width is that much bootstrap will display the web page like that. Basically bootstrap have 3 display mode that is desktop, tablet and phone, that means bootstrap have 3 different style for 3 different display mode. So if you use codepen i think bootstrap is assuming you're not using desktop so it is displaying the navbar vertically (tablet or phone) like the code I've given above. I've tried to copy and paste your code to my local computer and it runs well (navbar is displayed horizontally). So if you want to make a websites and work with bootstrap I recommend you to work with your local pc, not in codepen. You can copy bootstrap to your local pc, and cou can work with phpStorm or other software like that, that provide easy site upload via ftp to your server.
Your nav bar is working fine in large screen. But in medium and small screen, it gets vertical. So i come up with a easy solution: float the elements to the left. Just add the following code to your style sheet.
.navbar-nav>li, .navbar-nav {
float: left !important;
}
i hope this helps!
I am currently making a website using bootstrap. I have a menu bar on top, and I would like to change the color or background color of the specific menu bar when the section of the website is in. Like example, one of menu is call about, and there is a section in homepage call about. When the person is on the about section of the webpage, I want menu "about" will change into different color background.
I used data-spy(scroll) and data-target(my-navbar) to check if it's work, but it was not working. Is there anyway I can fix this problem?
P.S. This is my navbar part and body part that I use it. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Provision Health & Wellness</title>
<meta name="description" content="ProvisionHW">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<style>
body {
padding-top: 40;
}
h2 {
text-align: center;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Provision Health&Wellness
</div> <!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Health Product</li>
<li>Blog</li>
<li>Slim Product</li>
<li>Video</li>
<li>Skin Product</li>
<li>Contact us</li>
</ul>
</div>
</div> <!-- End Container-->
</nav> <!-- End navbar-->
Here is fiddle that's working.
https://jsfiddle.net/5e1n0nhw/1/
Here is jQuery that tracks active section
$(function() {
$('a.page-scroll').bind('click', function(e) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}
, 1500, 'easeInOutExpo' //add/remove for smooth scroll
);
e.preventDefault();
});
});
Don't forget to include jQuery easing.
Add id of page-top to your body element and href page-top to your logo so you can scroll to top on click.
Add class page-scroll on all a elements that you want to lead to section.
Wrap all sections in section tag.
And now you can style active link with css
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
color:green;
}
Use this awesome tool that can customize your navbar color and give you the css needed.
http://work.smarchal.com/twbscolor/
I am using Bootstrap 4.
I have a question about the Navbar "Fixed top" class. http://v4-alpha.getbootstrap.com/components/navbar/#placement
The Navbar "Fixed top" class covers content.
like this demo below, the Navbar covers <div class="jumbotron">,I want the Navbar to not cover it, what should I do?
I have no idea how to prevent the Navbar from covering content, because the device's size is visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
Try using sticky-top instead of fixed-top this worked for me on Bootstrap 4 Alpha6.
In my opinion the best way would be to set an enclosing tag to the rest of the content that it is covering and set the margin-top attribute in css in vw or vh or percentages (Depending on your use case) to make sure no content is hidden by the fixed bar on the top. This will make sure it is even resizable without significant changes in the navbar's effect on the page although i would suggest changing the margin on the basis of page size using the #media controller in css.
For more information on your problem you can check this thread:
twitter bootstrap navbar fixed top overlapping site
You can fix this with css
<style>
body {
margin-top: 50px;
}
</style>
Use:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
as shown here on w3schools.com
The 4.0.0 version of bootstrap css doesn't work properly. I had the same problem and replacing with 3.3.7 version fixed it.
You can Use class .sticky-top or overcome this using custom CSS
body{
padding-top: 70px;
z-index: 0;
}