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
Related
In my project, I use bootstrap ui.
I have navbar in main page, and it has ul tag with nav navbar-nav class.
There are product and market li in this ul tag.
Now product and market should be changed its color when mouse over.
I have trid to define with hove like:
<style>
active :hover{color:green}
</style>
But unlucky, it worked fail.
Here is my page code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8"><title>Starter Template for Bootstrap</title>
<link href="jsui/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jsui/easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="jsui/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<style>
active :hover{color:green}
</style>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid" style="height:70px">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="pic/logo.png" style="width:130px;height:40px;margin-top:2px"></a>
</div>
<div>
<ul class="nav navbar-nav" style="visibility: visible;">
<li class="active">product</li>
<li class="active">market</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
customer <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>John</li>
<li>Sam</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
Who can help me?
Your HTML is fine, you just got something wrong about the selector in CSS.
The correct way to select "Product" and "Market" would be:
.navbar .nav li.active a:hover{color:green}
Just to explain the Selector:
We are looking first for the .navbar Class which is on the <nav>
Element.
Then we give it a space (Otherwise it would try to find both Classes
on the same Element.
After that we look for .nav which is a Class on the <ul>
(Descendent of <nav class="navbar">) If you would try to select
only a direct Child you would use the Child-Selector">".
Last but not least, we give it a space and select every <li> Element
which has the .active Class (Notice that there is no space between
"li" and ".active")
At the very end we are looking for the <a> Element because the Text
is written inside of it and give it :hover (No Space) which is a
Pseudoclass
Here you can check out the working Pen
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
}
}
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!
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>
There is an example in jQuery Mobile: Up and Running which shows an interactive list containing title, description, and a link
http://my.safaribooksonline.com/book/-/9781449331085/4dot-lists/id2712982
I can't find the code for this, and the only way I have so far been able to reproduce the same effect is to nest an <hX> element inside the <a>, which I understand is bad practice.
Can anyone suggest the correct way to achieve this? The example below works, but only by nesting the inside the .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>List Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="example">
<div data-role="header" data-theme="c">
<h2>List Example</h2>
</div>
<div data-role="content">
<ul data-role="listview" >
<li>
<a href="#">
<h3>Title1</h3>
<p>Description1</p>
</a>
</li>
<li>
<a href="#">
<h3>Title2</h3>
<p>Description2</p>
</a>
</li>
</ul>
</div>
</body>
</html>
From the JQM docs (under "Text formatting & counts")
To add text hierarchy, use headings to increase font emphasis and use
paragraphs to reduce emphasis.
So that seems to be the correct way to do it. That said you can nest whatever you want in the li and style it using `CSS'.