CSS Drop Down Menu and Icon Issues - css

Please tell me why the dropdown menu isn't functioning and the fa fa-search icon isn't showing within the search box.
The dropdown menu is not collapsing. And the Search icon from http://fortawesome.github.io/Font-Awesome/icon/search/ doesn't display within the search box as it should.
Your help is highly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="X">
<link rel="icon" href="">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- NAVBAR ============================================== -->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigations</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div> <!-- Ende of Navbar Header -->
<div class="navbar-collapse collapse">
<div class="right-inner-addon pull-right">
<i class="fa fa-search"></i>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<li class="dropdown">
Community <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Social</li>
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
<li>Blog</li>
</ul>
</li>
</ul>
</div> <!-- End of Navbar Collapse -->
</div> <!-- Ende of Navbar Container -->
</div> <!-- End of Navbar -->
</div> <!-- End of Container -->
</div> <!-- End of .navbar-wrapper -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
CSS
/* --- Navbar ----------------- */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.right-inner-addon {
position: relative;
top: 8px;
right: 1px;
height: 3px;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px;
pointer-event: none;
}
/* --- Responsive CSS ----------------- */
#media (min-width: 768px) {
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container{
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
border-radius: 4px;
}
}


For the search issue, you need to put input-group-addon inside like so
<i class="input-group-addon fa fa-search"></i>
or preferably taken from the bootstrap website
<div class="input-group right-inner-addon pull-right">
<div class="input-group-addon">
<i class="input-group-addon fa fa-search">
</div>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
For the dropdown, I am not sure, but my guess would be do you need dropdown class in li
instead of
can you try

Related

Bootstrap 4 not centering vertically

Something really strange happening, I am using the right classes and style to center my h1 and paragraph. The div with my col-12 that contains the H1 and the other col-12 that contains the paragraph should be close one to another in the center of the Row div.
Why it is not working even tho I am using justify-content center and align-items center? Thank you!
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
#media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
#media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

You need to consider align-content-center (https://getbootstrap.com/docs/4.1/utilities/flex/#align-content)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
#media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
#media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b align-content-center">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Navbar title not moving to the center

my title inside my navbar for some reason is not moving to the center as I want to. I tried using padding, text-align and use right function all doesn't work. Can anyone help me? I tried following this question here but nothing happens, bootstrap 3 - how do I place the brand in the center of the navbar?
Here is the code whole code so sorry for the mess:
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" 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>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
</ul>
</li>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
css style I used it like this:
style.css
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position: fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
display:flex;
justify-content: center;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF;
color: white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background: white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF;
}
.navbar {background:#0000FF;}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}

This should work
ul{
list-style-type:none;
display:flex;
justify-content: center;
}
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li><h3>Text</h3></li>
</ul>

This shouldn't interfere with other classes
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>Text</h3>
</li>
</ul>
</div>

Developed a website using Bootstrap & it is responsive at some point

I have started developing a website using bootstrap and it is responsive but only to some extend.
If i minimize the browser, the contents auto-arrange itself but as i keep on minimizing at some point the h1 & p contents stop being responsive.`
<html lang="en">
<head>
<title>NiKuLsAn DeSiGn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-color: black;
}
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 50px; right: 70px;}
.imageAndText .col2 {position: absolute; z-index: 1; top: 200px; left: 150px;}
.imageAndText .col3 {position: absolute; z-index: 1; top: 50px; left: 150px;}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="imageAndText">
<img src="banner1.jpg" class="img-responsive" style="width:100%; height:auto;">
<div class="col">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="col3">
<img src="logo.jpg" alt="logo" />
</div>
<div class="col2">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b><br>A professional skier and a musician.</p>
</div>
</div>
</div>
</div>
</body>
Please help as I am not able to understand what is going wrong.

I have created an example where I have used minimal custom CSS and everything else is wprking using bootstrap framework.. Have a look and ask your queries.
body {
background: url('http://placehold.it/1920x400') no-repeat center center;
background-size: cover;
/* Workaround for some mobile browsers */
min-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #000;
}
.featurette-divider {
margin: 20px 0;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper CustomNavbar">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Logo Goes here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<hr class="featurette-divider">
<div class="container ">
<div class="col-sm-12">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b>
<br>A professional skier and a musician.</p>
</div>
</div>

Slider and navbar in one

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.

Nav bar comes on top of header

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>

Resources