This is your updated stylesheet file. Update the file named stijlLOTR.css with the following code. You also need to go through your HTML files and remove all the embedded stylesheet content that begins and end with these tags <style> and </style>. You shouldn't have any of that on your HTML pages because it's adding to confusion and conflicts with coding you're trying to use in stijlLOTR.css. Also remove the background-images.css code you have in your HTML pages. Stick with putting your CSS in the stijlLOTR.css file.
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative);
@import url(http://fonts.googleapis.com/css?family=Smythe);
/* CSS voor Bootstrap LOTR */
body {
background-color:rgb(240,255,245);
}
.jumbotron {
background-size:cover;
background-position:center center;
color:rgba(255,255,255,0.5);
margin-top:30px;
}
.index .jumbotron {
background-image:url(../img/datax-header.jpg);
}
.aboutmax .jumbotron {
background-image:url(../img/overons.jpg);
}
.it-consultancy .jumbotron {
background-image:url(../img/it-consultancy.jpg);
}
.particulieren .jumbotron {
background-image:url(../img/particulier.jpg);
}
.zakelijkedienst .jumbotron {
background-image:url(../img/zakelijk.jpg);
}
h1 {
font-family: 'Cinzel Decorative', cursive;
text-rendering: optimizelegibility;
}
h2 {
font-size:29px;
color:rgb(0,102,51);
font-family: 'Smythe', cursive;
}
h3 {
font-family: 'Smythe', cursive;
}
.col-lg-3 img {
width: 100%;
border-radius:9px;
}
/* Extra small devices (phones, up to 480px) */
/* Bootsstrap is Mobile First */
/* Small devices (tablets, 768px and up) */
/* This looks to be unncessary so I'm commenting it out */
/*
@media (min-width: 768px) {
.home .jumbotron {
background-image:url(../img/lotrMiddel.jpg);
}
}
*/
@media (min-width: 768px) and (max-width: 992px) {
.jumbotron {
margin-top: 60px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.jumbotron {
background-image:url(../img/datax-logo3-groot.jpg);
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* het menu */
.navbar {
background-color:rgba(0,102,0,0.7);
}
.navbar-inverse .navbar-nav > .active > a {
background-color: rgb(0,51,0);
}
.navbar-inverse .navbar-nav > li > a {
color:rgb(255,255,202);
}
.navbar-inverse .navbar-nav > li:hover {
background-color:rgb (204,102,0);
}
.navbar .dropdown-menu {
background-color: rgb(204,204,0);
}
.dropdown-menu > li > a:hover {
background-color: rgb(204,102,0);
}
/*formulier invul veld*/
input.form-control {
background-color:rgb(204,102,0);
font-style:italic;
}
.navbar input.form-control::-webkit-input-placeholder {
color: #fed;
}
.navbar input.form-control:-moz-placeholder { /* Firefox 18- */
color: #fed;
}
.navbar input.form-control::-moz-placeholder { /* Firefox 19+ */
color: #fed;
}
.navbar input.form-control:-ms-input-placeholder {
color: #fed;
}
/* knoppen in de inhoud */
a.btn-success {
background-color:rgb(0,102,0);
border-color: rgb(0,51,51);
}
a.btn-success:hover {
background-color:rgb(0,153,0);
border-color: rgb(0,51,51);
}
footer {
background-color:#0e540f; color:#fff; position: absolute;
width: 100%;
left: 0;
}
.full-width-div {
position: absolute;
width: 100%;
left: 0;
}
.voet{
color:#ff6600;
}
.kleur2{
background-color: rgba(14,84,15,.5)
}
Regarding the navigation dropdown. By default Bootstrap makes the Nav dropdowns work by clicking and not mouseover. To save some head aches with it, just reword the dropdown and make a submenu link for that page instead.
Saj