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
}
}
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 trying to make a website (just for learning). What I want is "follow us" h2 and two icon youtube and twitter at a side(right).
and if web page shrinks or if I open the website in the mobile device. it needs to be under the menu.
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="container">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="container">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
my website looks
This should do what you want it to. :)
.headerContainer{
display : inline-block;
float : left;
width : 200px;
}
/* small screens and mobile */
#media screen and (max-width:767px) {
.headerContainer{
display : block;
float : left;
clear : both;
}
}
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="headerContainer">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="headerContainer">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
header {
display: flex;
flex-direction: column;
}
#media (min-width: 480px) {
header {
flex-direction: row;
}
}
You could try this CSS. Hope it will solve your problem.
Try:
position:absolute, bottom:0px
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.
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>
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<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.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}