Bootstrap CSS positioning - javascript

The words or text below the logo in the navbar are not moving to the right of the logo (for reference link to the page -> http://127.0.0.1:5500/index.html).
Additionally the logo is not shifting to its left - it's happening in basically all the navbar codes. I'm trying to do this using CSS bootstrap. Any explanation would be very helpful since I have recently started learning bootstrap CSS.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/coffee-shop-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1{ /*Resturant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus{
text-decoration: none;
}
<!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">
<title>coffee cafe</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visble-md visible-lg ">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<h1>Coffee Place</h1>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>


You need to add .d-flex in div.navbar-header.
also add a little margin in you h1 to make it vertically align with the logo or you can also you vertical-align property.
I've also closed the unclosed container div.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://www.svgrepo.com/show/15418/coffee-cup.svg') no-repeat;
width: 50px;
height: 50px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 {
/*Resturant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="d-flex navbar-header">
<a href="index.html" class="pull-left visble-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<h1 class="mt-3">Coffee Place</h1>
</div>
</div>
</div>
</nav>
</header>

Related

How to stop hovered text from moving?

When hovering over a menu item in my nav bar, the text on it and other items shift around: the hovered item widens, the other items narrow. I tried changing the margin and padding but it did not affect this issue.
.profile-header-section {
width: 100%;
background-color: black;
height: 5rem;
}
.profile-nav {
width: 80%;
height: 5rem;
margin: 0 auto;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.profile-logo {
letter-spacing: 0.5rem;
font-weight: 900;
font-size: larger;
}
.profile-links {
display: flex;
width: 20rem;
height: 5rem;
justify-content: space-between;
align-items: center;
list-style-type: none;
}
.profile-links li > a {
text-decoration: none;
color: white;
}
.profile-links li > a:hover {
color: #d6c211;
background-image: -webkit-linear-gradient(0deg, #d6c211 0%, #ffc107 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: underline;
font-weight: 700;
}
<div class="container">
<section class="profile-header-section">
<header class="profile-header">
<nav class="profile-nav">
<div class="profile-logo">Profile</div>
<ul class="profile-links">
<li>Home</li>
<li>Resume</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</section>
</div>
How can the link text on the navigation bar be stopped from moving when the mouse cursor hovers over the links without losing the bold effect on hover?

.profile-header-section {
width: 100%;
background-color: black;
height: 5rem;
}
.profile-nav {
width: 80%;
height: 5rem;
margin: 0 auto;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.profile-logo {
letter-spacing: 4px;
font-weight: 900;
font-size: larger;
}
.profile-links {
display: flex;
width: 20rem;
height: 5rem;
justify-content: space-between;
align-items: center;
list-style-type: none;
}
.profile-links li > a {
text-decoration: none;
color: white;
/*transition makes it smooth*/
font-size:14px;
transition:500ms;
font-family:arial;
}
.profile-links li > a:hover {
color: #d6c211;
text-decoration: underline;
/* the moving effect was caused due to the change in font weight*/
}
<!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.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Figtree:wght#400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Profile Project</title>
</head>
<body>
<div class="container">
<section class="profile-header-section">
<header class="profile-header">
<nav class="profile-nav">
<div class="profile-logo">ProtFolio</div>
<ul class="profile-links">
<li>Home</li>
<li>Resume</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</section>
</div>
</body>
</html>
this should work for the moving effect and i can see you have just started learning . creating a hamburger is easy but you should try to make it yourself you can also use google , that is the whole idea of programming "copy and paste" the code you think is needed ; just type "How to make a hamburger in html" in the google search bar and you will get a tons of results ; "Keep learning"

.profile-header-section {
width: 100%;
background-color: black;
height: 5rem;
}
.profile-nav {
width: 90%;
height: 5rem;
margin: 0 auto;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.profile-logo {
letter-spacing: 4px;
font-weight: 900;
font-size: larger;
}
.profile-links {
/*done some changes here*/
display: grid;
align-content: self-start;
justify-content: center;
width: 100%;
gap: 1rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
font: 120% system-ui;
text-align: center;
padding: 2rem 1rem;
list-style-type: none;
}
.profile-links li > a {
text-decoration: none;
color: white;
/*transition makes it smooth*/
font-size:14px;
transition:500ms;
font-family:arial;
}
.profile-links li > a:hover {
color: #d6c211;
text-decoration: underline;
font-weight:900;
/* the moving effect was caused due to the change in font weight*/
}
<!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.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Figtree:wght#400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Profile Project</title>
</head>
<body>
<div class="container">
<section class="profile-header-section">
<header class="profile-header">
<nav class="profile-nav">
<div class="profile-logo">ProtFolio</div>
<ul class="profile-links">
<li>Home</li>
<li>Resume</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</section>
</div>
</body>
</html>

html cannot display when render

I expect a custom navbar where I set nav background to black and set a tag to display inline-block and padding 10. But, HTML do not render anything when I add css. Though, It is rendering when I remove CSS. Please, can someone explain why and how can to make it work?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.topvav {
width: 100%;
background: #000;
border: 1px solid #000;
}
a {
display: inline-block;
text-decoration: none;
color: white;
padding: 10px;
}
a:hover {
display: inline-block;
/* float: left; */
background: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
</div>
</body>
</html>

Typo: In the CSS file replace .topvav with .topnav

JQuery UI button style not appearing in Dialog box

The buttons inside a dialog box is not appearing in JQuery UI Style whereas the outside buttons are getting stylised.
Here is my piece of code where i think i'm doing wrong-
$("#addSection").button().click(function(){
$('#sectionDialog').dialog({
buttons:{
"Add New Section":function(){},
"Cancel": function(){}}
});
});
Inside Dialog Box-
Here is the problem
Outside Dialog Box-
Appering perfectly outside dialog box
Edit:
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Tasks</title>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
My CSS Code:
body{
background-color: #19456b;
}
h2{
text-align: center;
color: #d89216;
font-family:'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr{
margin: 0;
color: #d89216;
}
button:focus{outline:none !important;}
.container-fluid{
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255,214,75);
background-color: blanchedalmond;
}
ol li{
padding: 2px;
cursor: grabbing;
}
ol li:hover{
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox
{
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection
{
text-align: right;
margin: 12px 2px;
}
.addTask
{
text-align: right;
margin: 12px 2px;
}
#sectionDialog{
display: none;
}
#taskDialog{
display: none;
}
.ui-icon-close
{
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
Thanks is advance!

Consider adjusting your head like so:
<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />
The order that they load in is important.
$(function() {
$("#addSection").button().click(function() {
$('#sectionDialog').dialog({
buttons: {
"Add New Section": function() {},
"Cancel": function() {}
}
});
});
});
body {
background-color: #19456b;
}
h2 {
text-align: center;
color: #d89216;
font-family: 'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr {
margin: 0;
color: #d89216;
}
button:focus {
outline: none !important;
}
.container-fluid {
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255, 214, 75);
background-color: blanchedalmond;
}
ol li {
padding: 2px;
cursor: grabbing;
}
ol li:hover {
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox {
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection {
text-align: right;
margin: 12px 2px;
}
.addTask {
text-align: right;
margin: 12px 2px;
}
#sectionDialog {
display: none;
}
#taskDialog {
display: none;
}
.ui-icon-close {
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>

How to make menu slide from Viewport to the Header

I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>

Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>

I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.

Why are there black and white bars on the top and bottom of my page?

I am still a beginner...
The first time I created the page everything worked well. The background img was covering everything and the navigation was transparent. But as soon as I put in the links to bootstrap everything changed what am I missing?
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent navbar-inverse">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}

Should be okey now.
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
body {
height: 800px;
background-image: url(https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent ">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>

Remove Navbar-inverse .. its adding black background.
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent navbar-inverse">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}</style>

Categories