I have a problem in my css. I want to make my navbar like this ( as you can see, it has no background on navbar and it joins with slider ). I have tried every advice in youtube tutorials but nothing worked.
Here's the link I want to show you:
http://theme.ridianur.com/alamak/
I was able to change the color background of my navbar by opening bootstrap.min.css in notepad, search for "navbar-default", and change the color code. But, I wasn't able to make it no background like I want to.
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="boot/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Image Slider</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>NEWS</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
<div class="logo">
<img src="kets.png">
</div>
</div>
</nav>
<div class="container-fluid hero-slide">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="Cats1">
<div class="carousel-caption">
<div class="tekslide1">
<h1>Hewan yang mainstream</h1>
<p>Kita juga gatau kenapa milih topik kucing</p>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="Cats2">
</div>
<div class="item">
<img src="img/3.jpg" alt="Cats3">
</div>
<div class="item">
<img src="img/4.jpg" alt="Cats4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
and my css :
#charset "utf-8";
#font-face{
font-family: 'custom';
src: url('OpenSans-Regular.ttf') format('truetype'); //<-- semicolon
}
#font-face{
font-family: 'custom1';
src: url('Alternate.ttf') format('truetype'); //<-- semicolon
}
#media (min-width: 768px){
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: top;
font-family: 'custom';
letter-spacing: 5px;
padding-top: 12px;
margin-bottom: -20px;
}
.tekslide1{
font-size: 25px;
padding-left: 300px;
padding-bottom: 500px;
font-family: 'custom1';
}
.navbar .navbar-collapse{
text-align: right;
padding-right: 120px;
}
.navbar-default .navbar-collapse .nav >li >a {
color: #EEEEEE;
margin-left: 10px;
margin-right: 5px;
font-size: 13px;
}
.navbar-default .navbar-collapse .nav >li >a:hover, .navbar-default .navbar-collapse .nav >li >a:focus{
color: #BDBDBD;
background: none;
}
.logo{
float: left;
padding: 2px;
margin: 2px;
margin-bottom: -15px;
margin-left: 5%;
border: none;
border-radius: 100px;
}
.hero-slide{
margin-top: -20px;
}
.navbar li { color: #000 }
Any help would be appreciated. Thanks!
I'll explain this in pseudocode. If you want help you need include relevant bits of html and css in your post, not the archive of an entire site.
This effect you're looking for is nothing more than:
<div class="wrapper">
<div class="navigation">
</div>
<div class="banner">
</div>
</div>
and
.wrapper{background:url('your_image.jpg');}
.navigation, .banner{background:transparent;}
A graphic applied to a parent container and navigation / banner with transparent backgrounds.
Related
I am trying to change the Bootstrap Carousel indicator align to vertical and locate them in the right of the page.
As you can see at following demo (the demo is on Bootply, I am not sure why the indicators are still looks like horizontal at JS Fiddle).
Working Demo
As you can see from the demo I have set the right: 5%; on .carousel-indicators but thy are rendering almost at the middle of the Carousel! What am I doing wrong?
.carousel-indicators {
background-color:#000;
position: absolute;
bottom: 200px;
z-index: 15;
width: 30px;
margin-left: 20px;
list-style: none;
text-align: center;
right: 5%;
}
.carousel-indicators li{
display: block;
width: 10px;
height: 10px;
margin-bottom: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin-bottom: 10px;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1920x400/333/333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x400/333333/333333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x400/333/333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Left component is set to 50% in bootstrap css. you need to overrride it.
give your indicators left 95% that should fix your problem.
left:95%
set left:inherit because the lib has a default setting you must override.
I'd like to show an image, full height image, like this website on every browsers without writing specific number of pixels like height: 400px;.
mobile
laptop
How should I change my css? Would you please let me know?
html {
font-size: 62.5% !important; /* 10 px */
}
/*header {
position: absolute;
text-align: center;
top: 0px;
z-index: 1000;
color: #fff;
width: 100%;
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}*/
/*img {
display: block;
max-width: 100%;
height: auto;
}*/
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel .carousel-control {
visibility: hidden;
}
.carousel:hover .carousel-control {
visibility: visible;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-inner {
margin-bottom:50px;
}
/*.logo {
float: left;
text-align: left;
display: inline-block;
}*/
.transparent-header {
z-index: 22;
position: absolute;
width: 100%;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#carousel-example-generic {
width: 100%;
height: 100%;
position: relative;
}
.nav::after,
.nav::before,
.navbar-header::after,
.navbar::after {
display: table-caption;
}
.nav.navbar-nav li,
.nav.navbar-nav li a {
display: inline-block;
}
#gnav {
font-size: 0.9em;
width: 100% !important;
}
#gnav
/*#gnav_nav*/ {
text-align: center;
}
#logo
img {
display: block;
margin: auto;
}
#intro {
position: relative;
overflow: hidden;
}
#bg-image3 {
background: url("http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg");
}
.bg-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<meta name=”robots” content=”noindex,nofollow,noarchive,noodp,noydir”>
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
{% block additional_css %}{% endblock %}
{% block custom_css %}{% endblock %}
</head>
<body>
<div id="wrapper">
<!-- <div class="container" id="range">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:Yellow;">ExtraSmall</div>
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3" style="background-color:green;">Small</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" style="background-color:blue;">Midium</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-3" style="background-color:Red;">Large</div>
</div>
</div> -->
<!-- Header -->
<header id="header" class="header clearfix fixed transparent-header" >
<div class="container-fluid" id="header-inner">
<div class="row">
<!-- Global Navigation -->
<div id="gnav" class="" data-spy="affix" data-offset-top="94">
<nav class="navbar navbar-inverse" id="gnav_nav">
<ul class="nav navbar-nav" id="gnav_ul">
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">商品紹介</a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">ご注文</a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">お問い合わせ</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">会社案内</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- .nav .navbar-nav -->
</nav> <!-- .navbar .navbar-default -->
</div> <!-- #gnav .col-md-9 -->
<!-- Logo -->
<div id="logo" class="">
<a href="#">
<img src="http://vignette2.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/20120422044236" id="logo-img" class="img-responsive logo-img" height="50" width="50">
</a>
</div> <!-- #logo .col-sm-3 -->
</div> <!-- .row -->
</div> <!-- .container -->
</header> <!-- #header .clearfix -->
<section id="intro">
<article id="apple">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg" alt="First slide">
</div>
<div class="item">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-2.jpg" alt="Second slide">
</div>
<div class="item" id="bg-image3">
<div class="bg-image" id="bg-image3">
<h2 class="" id="">This is the headline</h2>
<p class="" id="">This is a pen. This is an apple. U~n, apple pen.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div>
<span>Bootstrap carousel</span>
</div>
</article>
</section>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
</div> <!-- #wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap: 3.3.4, HTML5, jQuery: 2.1.3
Set your image as background-image for that element with background-size: cover;
Set that element to height: 100vh;
Quick example: https://jsbin.com/dajepaw/1/
*{box-sizing:border-box;margin:0;}
html, body{height:100%;font:14px/1.4 sans-serif;}
header {
position: fixed;
z-index: 1;
width: 100%;
top: 0;
height: 72px;
background: #fff;
}
article {
background: #fff;
height: 50vh;
} article:nth-child(odd) {
background: #f7f7f7;
}
footer {
background: #444;
height: 72px;
}
/* SPECIAL CLASSES */
.fullWithBackground {
height: 100vh;
background: url(https://i.stack.imgur.com/LCupt.png) 50% fixed;
background-size: cover;
color: #fff;
}
.centerInner{
display: flex;
align-items: center;
justify-content: center;
}
<header>Header</header>
<div class="fullWithBackground centerInner">
<div>GALLERY</div>
</div>
<main>
<article>Article 1</article>
<article>Article 2</article>
</main>
<footer>Footer</footer>
Problem: space between .nav and .jumbotron in bootstrap.
what did I do: override the bootstrap.css , override .jumbotron{margin-bottom:0px}, it's not working.
What I've found: it works well when I debug it in the original file.
couldn't work in override css file
work well in original file
HTML:
<body>
<div class="header">
<div class="top-header">
<div class="jumbotron">
<img src="image/name.png" alt="">
<h2>Curiosity Creative</h2>
</div><!--Jumbotron-->
</div><!--top-header-->
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="#displayItem" 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>
</div><!--navbar-header-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="displayItem">
<ul class="nav nav-tabs">
<li class="home active">
<i></i> Home</li>
<li class="me">
<i></i>AboutMe</li>
<li class="blog">
<i></i>Blog</li>
<li class="contact">
<i></i>Contact</li>
</ul>
</div> <!-- collapse navbar-collapse-->
</div><!--container -->
</nav><!--nav-->
</div>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background: url("../image/body_bg.jpg");
overflow: scroll;
}
div{
position:relative;
}
.top-header{
background-color: white;
}
.jumbotron {
background-color:transparent !important;
text-align: center;
margin-bottom:0px;
}
.jumbotron img{
width: 400px;
}
.jumbotron h2{
color: #aaa;
font-size: 13px;
font-family: verdana;
}
It looks to me like maybe you've included your "index.css" before the "bootstrap.css". If that is correct, swap them around so that your "index.css" is loaded last, not first.
eg;
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
I'm having a problem here. One of my friends was helping me with Bootstrap stuff for my website, but after converting my site to Bootstrap, I can no longer change my background color in my website. Will someone please help me? Thanks a ton! Oh, and also, while at it, how would I create a Facebook social link with the Facebook icon on, as well as when hovering over the icon there is another color? Thanks again!
HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome-1">
<title>My Portfolio</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
Home
</li>
<li>
About
</li>
<li>
Pictures
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="Images/Image10.jpg" alt="...">
<div class="carousel-caption">
<h3>Near my house: a meadow</h3>
</div>
</div>
<div class="item">
<img src="Images/Image4.jpg" alt="...">
<div class="carousel-caption">
<h3>Flume Gorge: A Waterfall</h3>
</div>
</div>
<div class="item">
<img src="Images/Image3.jpg" alt="...">
<div class="carousel-caption">
<h3>Flume Gorge: The Forest</h3>
</div>
</div>
</div>
<div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>School Address: Not Availible</p>
</div>
<div class="footer-col col-md-4">
<h3>Connect with Social Media!</h3>
<div>
</div>
</div>
<div class="footer-col col-md-4">
<h3>About Bootstrap</h3>
<p>Bootstrap is a free open source project that help simplifies the creation of websites</p>
<p>Get Bootstrap Now</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Name 2015-2016
<p> All music used on this site belongs to the respective authors</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS Code:
.navbar-custom .nav li a {
color: #fff;
padding: 20px;
}
.navbar-custom .nav li a {
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
}
.navbar-default .navbar-nav>li>a {
color: #777;
}
#carousel-example-generic{
width: 60%;
height: 100%;
margin: 0 auto;
}
.footer {
margin-top: 20px;
text-align: center;
font-size: 11px;
font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}
.footer {
margin-top: 20px;
text-align: center;
font-size: 11px;
font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}
for the firs question this is all what you need :
body {
background-color: black;
}
for the second question you can use Font Awesome
here is an exemple I created on how to change the color on hover on social media icons :
<div class="background">
<span>
<i class="fa fa-round fa-facebook"></i>
<i class="fa fa-round fa-twitter"></i>
<i class="fa fa-round fa-youtube"></i>
<i class="fa fa-round fa-linkedin"></i>
</span>
</div>
Live Demo
EDIT : link updated !
To make a facebook button i would use fontawesome.
Fontawesome provides you a lot of icons, similar to bootstrap glyphicon, to wich you can also apply some CSS to make them appear as you want.
To do this you have to:
1) Link the fontawesome file, adding this to your <head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2) Choose your icon from here and insert it anywhere you want, in a button or an anchor to your web page.
For example, if you will choose "facebook-official", you just have to insert this in your html
<i class="fa fa-facebook-official"></i>
For example:
<a id="fb" href="http://www.facebook.com">
<i class="fa fa-facebook-official fa-2x"></i>
</a>
#fb{
background-color: blue;
}
#fb:hover{
background-color: red;
}
This will make a link to the fabook home page, that if hovered will became red
Hoping to have helped.
I have the following CSS code, and my problem is that my
nav bar comes on top of my header block. How can I move
the nav bar straight down from the header?
header {
background: black;
height: 60px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
header img {
float: left;
margin-right: 10px;
position: relative;
}
header h1 {
color: white;
font: 26px Helvetica, Arial, sans-serif;
line-height: 60px;
margin: 0;
vertical-align: middle;
}
nav {
background: black;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
give the nav a margin-top that is the same height of your navbar.
nav {
background: black;
margin: 0;
margin-top:60px;
padding: 0;
position: absolute;
width: 100%;
}
#H.A; you give position absolute to your header block & nav block . So, when you give position absolute to an element then the element remove for the normal flow
CSS:
nav {
top:60px;
padding: 0;
position: absolute;
width: 100%;
}
Read this article for more http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
<!DOCTYPE html>
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-top{
position:static;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- 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>
<a class="navbar-brand topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>