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!
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
Bootstrap Navigation link breaks into multiple line.
As shown in pic, Business Plan and Add Member text is displaying in different lines. I need to display in single line. How to fix this issue.?
Wrap your navigation In
"container-fluid"
so it take full width of page.
<!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-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Business</li>
<li>Add</li>
<li>Product</li>
<li>Contact</li>
<li>Plan</li>
<li>Member</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>Wrap your navigation In "container-fluid"</p>
</div>
</body>
</html>
If you are using bootstrap, there are some predefine css included, you can try look at the css setting in this website bootstrap nav links, with only image, it's hard to tell where exactly the problem is.
You will need to add following to stretch the nav-item text into one line :
flex-shrink: 0; //this will the issue
Full Example:
.nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
> * {
flex-shrink: 0; // this is imp
}
}
In bootstrap, I'm trying to show divs A and B stacked on extra small devices and displayed in one line on small devices and above. (just like in this example: https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal)
However, the divs are not stacked on extra small devices (using Firefox ESR 52.4), but stay the same across all device sizes.
Any hint about what I am missing would be great:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Bootstrap related files -->
<link rel="stylesheet" href="vendor/bootstrapcss/bootstrap.min.css">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrapjs/bootstrap.min.js"></script>
<script src="vendor/workarounds/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
A
</div>
<div class="col-sm-8 hidden-xs-down"
style="text-align:right">
B
</div>
</div> <!-- /.row-->
(...)
There are other bootstrap elements further down on the page which work, but the layout instructions do not. I have checked that all related js and css files are available, they all return status 200.
Bootstrap grid classes are specific to certain screen sizes and can be used together. (https://getbootstrap.com/docs/4.0/layout/grid/#grid-options) If you want the divs in the row to stack on extra-small (xs) give them the class col-12 to force the columns to take the full width of the row on devices smaller than 576px wide.
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;
}
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>