I've created a basic horizontal navigation bar. It has your generic options: Homepage, contact us, about, and games. However, even though contact us, games, and Homepage are close together, I want to make it so about is on the opposite side of the web page/navigation bar, far away from the others but still connected to it through a huge empty space of the navigation bar. How would I go about doing this? Below is my current CSS code if it helps:
.horiznavli {
display: inline;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
EDIT: My apologies here is the HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css">
<meta charset="UTF-8">
<meta name="description" content="Official Dark Matter Studios site">
<meta name="keywords" content="HTML, Studio, Game, Dark Matter">
<meta name="author" Content="Matt Jones">
<title> Dark Matter Studios </title>
</head>
<body>
<ol id = "HorizNav" style = "list-style-type:none">
<li class = "horiznavli"> HomePage </li>
<li class = "horiznavli"> About </li>
<li class = "horiznavli"> Games </li>
<li class = "horiznavli" id = "spaced"> Conact Us </li>
</ol>
<h1 id="title_screen"> Dark Matter Studios</h1>
<div id="wrapper">
<h1> What is Dark Matter Studios all about? </h1>
<p> Dark Matter studios is an independent game development dedicated to producing quality games out of a passion and love for gaming.<br>
Born from the frustration of anti-consumerism, microtransactions and DLC eccentric practices held by many AAA companies </p>
<br>
<br>
<h1> WHAT WE'RE ALL ABOUT </h1>
<p> Dark Matter Studios was founded around the principle of honesty and integrity with our fans. After all, without them we wouldn't get anywhere! Though Dark Matter studios holds itself responible the following standards: </p>
<ol style="list-style-type: circle">
<li> Honesty with our customers. </li>
<li> No Microtransactions or overpriced DLC</li>
<li> We are honest with our customers, we don't promise things and not deliver</li>
<li> We promise high quality games, with no graphical downgrades on release</li>
<li> We stick to our word, we do not mislead our customers to gain a quick buck off them</li>
</ol>
</div>
</body>
</html>
.horiznavli {
float:left;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
#HorizNav.ul li:nth-child(3)
{
float:right!important;
margin-left:100px!important;
}
It's better if you had added your html code as well. Anyway if you are using bootstrap you can use this code and no need of css.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Homepage <span class="sr-only">(current)</span></li>
<li>Contact us</li>
<li>Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Otherwise if you are using html and css only, use this code.
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Games</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
Tell me if this is what you wanted.
Related
Design a web page which should contain Bootstrap’s responsive navigation bar, a responsive circle image and a responsive footer.
The snap shot of the web page is given below:
Image 1: Web page in large devices
https://drive.google.com/file/d/1szF9Fc8uX_2wtVw2ase_Lxmg_7ZHitzy/view?usp=sharing
Image 2: web page in small devices:
https://drive.google.com/file/d/1RclzRGsN_PTptMHzrDznFlTzrY2yK5fc/view?usp=sharing
Note:
The web page ‘responsive.html’ template is given. You have to write the code only for the specified part of the 'responsive.html' file and 'app.css' file.
Key Points:
Add responsive feature to the navigation bar. The collapsing nature is tripped by a button with the id ‘btn-id’ belongs to Bootstrap’s navigation toggle class and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates various elements like navigation links, forms, and other contents to toggle
Set the navigation brand as ‘MyBrand’.
Create three icon bars (hamburger button) with appropriate Bootstrap class. This will toggle the elements that are in the navigation collapsible div tag.
Add responsive features to the images so that it can automatically adjust to fit the size of the screen.
Make the image to scale down if it has to, but never scale up to be larger than its original size. Set the properties accordingly. For this override necessary css properties of the ‘img-responsive’ class in ‘app.css’ file. Set the max-width of the image to 100% and height to 'auto'.
After written the code I am facing some errors :
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 3 : Set 3 icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
Can you please tell what should I do after this to resolve these errors.
Here is the code I have written :-
body {
font-family: 'Open Sans', sans-serif;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
article {
padding: 40px;
}
article img {
text-align: center;
box-shadow: 6px 6px 8px #777;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
article p {
font-size: 16px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
/* The following code is used to create same-sized columns
in a multi-column layout.
Code from:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
/* columns of same height styles */
.container-xs-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-xs-height {
display: table-row;
}
.col-xs-height {
display: table-cell;
float: none;
}
#media (min-width: 768px) {
.container-sm-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-sm-height {
display: table-row;
}
.col-sm-height {
display: table-cell;
float: none;
}
}
#media (min-width: 992px) {
.container-md-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-md-height {
display: table-row;
}
.col-md-height {
display: table-cell;
float: none;
}
}
#media (min-width: 1200px) {
.container-lg-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-lg-height {
display: table-row;
}
.col-lg-height {
display: table-cell;
float: none;
}
}
<!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#btn-id">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- FILL YOUR CODE FOR BRAND AND TOGGLE (ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
<a class="navbar-brand" href="#">MyBrand</a>
</div>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div class="collapse navbar-collapse" id="btn-id">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<div class=" ">
<div class=" ">
<section class=" ">
<article>
<!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE IMAGE -->
<img class="img-responsive img-circle" id="image" src="https://www.capecod.com/wp-content/gallery/nature-walk-through-harwich-conservation-trust-lands/SK_West-Harwich-Nature-Walk-Through-Consevation-Trust-Lands_10.23.18-7.jpg" alt="Nature Image" />
</article>
</section>
</div>
</div>
<footer class="footer">
<p class=" ">Lorem ipsum</p>
</footer>
</body>
</html>
Try changing the id of collapsable div from "bin-id" to "bs-example-navbar-collapse-1" so it will look something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
This will remove the following errors:
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
For the error,
Fail 3 : Set 3 icon bar for the 'span' tags
Try removing the first span (Toogle Navigation) as only 3 span tags are required.
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Problem 1:
The row is overflowing with other content (specifically on the other divisions that I made).
Question 1:
How to make a division to get the whole height of the viewport? like using "height: 100%"
Screenshot:
Normal Screenshot (PC View)
This is when the user is on "phone view" or with a smaller resolution.
Codes:
HTML Code (index.html)
<!DOCTYPE html>
<html>
<head>
<!--Meta Data-->
<meta charset="utf-8">
<meta name="author" content="Kirk Niverba" />
<meta name="description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!">
<link rel="author" href="https://plus.google.com/u/0/100208830349097131526" />
<link rel="publisher" href="https://plus.google.com/u/0/100208830349097131526" />
<meta property="og:title" content="Prospekt | A Gaming Community" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://wallpapercave.com/wp/rJRFZZ8.png" />
<meta property="og:url" content="http://prospekt.ml" />
<meta property="og:description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!" />
<meta property="fb:admins" content="100003700811738" />
<!--Insert Required APIs-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/box.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<title>Prospekt | A Gaming Community</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<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="//prospekt.ml">Prospekt | A Gaming Community</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Prospekt</li>
<li>Introduction</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Glossary</li>
<li>
</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Member Area <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Sign In</li>
<li>Register</li>
<li>Forgot Password</li>
<li>Your Dashboard</li>
<hr />
<li>Admin Login</li>
<li>cPanel</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid box-1 text-center" id="section1">
<br>
<br>
<h1> Welcome to Prospekt! </h1>
<hr>
<div class="row info">
<div class="col-sm-4">
<h1 class="title"> Why Prospekt? </h1>
<p class="content"> Why you should visit or use Prospekt as your social website? You should use Prospekt because it's <b>free</b>, <b>lightweight</b>, <b>fast</b>, and <b>reliable</b>.</p>
<p class="content"> We assure you your own privacy, security, enjoyment, and more when you visit our website. This website is also <em>mobile-friendly</em>, supported by jQuery and Bootstrap3. When you're a member, we assure your privacy and all the security measures to make you safe out there! Enjoy gaming! </p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Learn More...
</div>
<div class="col-sm-4">
<h1 class="title">Who We Are?</h1>
<p class="content">We are the gamers, or players, or geeks. It doesn't matter who you are in reality, it matters how you play or cooperate with others, avoiding to be toxic or salty out there!</p>
<p class="content">There are many ways to behave in the "tribunal" or to the games. Learn how to control yourself or became a <em>"non-salty/toxic"</em> player!</p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Anti Toxic Campaign
</div>
<div class="col-sm-4">
<h1 class="title">What Do We Do?</h1>
<p class="content"> We do many things, just like other people do. It doesn't mean that we're just sitting in front of a computer for hours, even days, is we aren't doing anything or we aren't even socializing with other people. <br><br><b>[Developer]: </b>As a developer of this website, I gave like a hundred of hours contributing to this website, I want you to cooperate with the system, by not being a toxic or a salty player. Enjoy my website and Happy Gaming out there!</p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Testimonials
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Developer Bio
</div>
</div>
</div>
<div class="container-fluid box-2 text-center" id="section2">
<h1> Other Informations </h1>
<hr>
</div>
</body>
</html>
Javascript (used for scrollspy and smooth scroll)
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
CSS File
/*
Author: Kirk Niverba
Project Name: Prospekt - DivCSS
Date: Sept 4, 2016
License: MIT License
*/
.box-1 {
height: 700px;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
height: 640px;
background-color: #faf0e6;
color: black;
padding: 15px;
}
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
}
h1.title{
font-family: Impact;
}
p.content {
font-family: Century Gothic;
font-size: 17px;
}
.info{
overflow: hidden;
}
Why not just use min-height:100%?
.box-1 {
min-height: 100%;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
min-height: 100%;
background-color: #faf0e6;
color: black;
padding: 15px;
}
http://www.codeply.com/go/rnKegYatGf
Remove this line from your CSS. This is messing your code up.
.box-1 {
height: 700px;
I saw this post Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
Tried it but it didn't help.
Using it in asp.net project.
Site.Master code:
<head>
<style>
.body {
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: black !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #fff !important;
background-color: #fbb534 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body data-target=".navbar">
<header>
<nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;">
<div class="container" style="margin-left: 0px;">
<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 src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
after 1-2 seconds:
----------------------EDIT STARTS HERE-----------------------
Note: Bootstrap css were not used, extremely sorry for that.
Plain css and html in site.master page are used.
Ok, So I finally, kind of, found the issue myself.
Trials: Tried all the suggestions provided in the answers, Thank you all for that but they didn't help.
Issue: I created an empty aspx page with no content in it and loaded it with master page. What I see is below:
On the other hand when the page with some content loads it sets the navbar correctly like this, looks like when the Admin page loads it is empty for 1-2 seconds and when it renders it sets the correct style:
So what I did is I put below code to make it less ugly :(
li{
display: inline;
}
which now will show up like :
Any other suggestions guys ?
Your code is missing the part where you include Bootstrap, and that is the main point. Your navbar is styled by Bootstrap, so it won't be styled until the Bootstrap's CSS file is loaded.
Put the Bootstrap CSS in the <head> part of your page in a <link> element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
This is your code without bootstrap: https://jsfiddle.net/xa2ychxn/ and this is your code with the Bootstrap's CSS file in the <head> section: https://jsfiddle.net/edaovwjt/
You are using class names from Bootstrap (navbar navbar-default). As you don't have any CSS code to make the navbar inline, when you finally get the expected result that means that something else gets loaded: that's Bootstrap.
I think you are loading something in the page using Ajax, and the content that is loaded contains bootstrap's CSS. That's why you don't know that you are using it, and why it is loaded some time after the page rendering.
Have you tried putting the styles in a CSS file or in a style tag in the head?
<html>
<head>
<style type="text/css">
.navbar {
margin-bottom: 0px;
clear: none;
background-color: white;
border-color: white;
}
.container {
margin-left: 0px;
}
.navbar-header img {
margin-right: 40px;
width: 130px;
height: 40px;
}
.navbar-left li {
padding-left: inherit;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<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 src="../../Images/Logo.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Alternatively, if you do have a linked CSS sheet, check the styles applied to the classes in your header. Some of the elements are probably rendered according to the CSS styles first, then the inline styles are overriding them as elements are rendered.
I know this might be a longshot but can you try using Minified versions of the bootstrap and jquery.Just give it a try and let me know
Try using these :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem seems to come from external style sheets.
During the brief period where the LI elements are displayed vertically, i guess you're still busy loading CSS from external files.
Does it still happen if you add the following CSS to the style element in the head of your page?
.navbar ul
{
list-style:none;
}
.navbar ul li
{
display:inline-block;
}
.navbar ul li a
{
/* i have no idea if this is right. it is just an approximation. */
/* you will have to fiddle with it until it is right. */
padding:10px 20px;
}
(or see this codepen)
I'm new to html and css. I'm trying to learn them but I have been having some issues. Basically I've been trying to create the website with the background image that has the navbar along the top (this works when previewing with brackets not yet here).
Can I change the colour of the navbar?
Also, how to have h5 header centred on the left side of the page, with h5 header below it, but as four lines, not as 2 long ones overlaying the image.
If anyone could help out that'd be great.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
}
.txtpic {
position: absolute;
text-align: center;
background-image: http: //i.imgur.com/pE2NrKh.jpg;
color: white;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<title>Kyrgystan</title>
<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.5/js/bootstrap.min.js">
</script>
<title>Kyrgystan exped</title>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: relative; top: 0; left: 0;" width="100%">
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</nav>
<style>
text-align:justify;
</style>
</div>
<div class="txtpic" style="top: 100%;">
<div class="row-sm-3"></div>
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</body>
</html>
if you want to change your navbar text color try with
.navbar-default .navbar-nav>li>a {
color: red !important;
}
EDIT:
Let say this is the html markup
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="list">
<div class="txtpic" style="text-align: center">
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
1- / youre previous code you was trying to put an image as an background with img element
1-1/ better way to do it with css just
.list {
background: url(http://i.imgur.com/pE2NrKh.jpg);
background-size: cover;
}
also you said that you cant change the color of your navbar text, you need to select the a element with .navbar-nav > li > a
.navbar-nav > li a{
color: white !important
}
For having the contents of h5 as 4 lines instead of the default way they appear try using the <br> tag. This tag breaks the line and starts a new line. So you could write it the following way:
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips.
<br> We have over a thousand nights under canvas between us, and there are more in the pipeline.
<br> We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart.
<br> So far our outings have taken us across Europe, Asia and Africa.
</h5>
check out the following link to help you understand this tag better
The reason why this is not on top of the background image is that you have defined absolute positioning in the class 'txtpic'. try changing it to something else and tell me what happens.
Also the navbar background-color seems to change when i try to do so. If you want to change the text color use 'color:' instead of 'background-color'.
My main issue with using CSS libraries is that they often overwrite custom CSS styles that I specifically set. For example, here I have a list that exists within a Bootstrap expand/collapse menu:
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
I want to set my own font color, so I use the following CSS:
nav li {
font-size: 16px;
color: #004687;
}
But when I view in Firefox's Inspector, I see the color I have chosen is being overridden by Bootstrap.
My custom CSS occurs after the Bootstrap files have been loaded in the of the HTML document.
How do I prevent this happening without setting style="color: #004687" to every element?
EDIT: Thanks for the suggestions thus far, but none have been successful. I'm pasting the full original code to give you greater detail:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
Menu
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
</nav>
</div>
</header>
</div>
My CSS is included like this:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
EDIT 3: I have found a cheap workaround by using ID's rather than classes which works due to CSS specificity (ID's override classes). This isn't a very clean solution and I'd still like to know why I cannot override the Bootstrap classes with my own.
Overwrite it with additional class added to the list:
<ul class="nav navbar-nav custom-class">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
and in your custom styles:
.nav.custom-class li {
font-size: 16px;
color: #004687;
}
try to place custom css file below bootstrap.css.
or
nav li {
font-size: 16px !important;
color: #004687 !important;
}