navbar brand not styling and navbar has no background color just transparent - background

Question

My navbar won't play ball. It's almost there but I have two problems which I can't seem to resolve.
1) When you scroll the page the navbar is transparent. I added some padding to the top for spacing but I can't see why it's transparent. There are no opacity settings in my CSS!
2) I've got my logo aligned to the right with navbar-brand but no matter what I do with the CSS I can't seem to change the text color, size or type.
3) I'm also struggling to make the background image fill the whole page. I've tried all sorts to make it fit but it won't.
Can anyone help with my problems? I've temporarily hosted the index page as I have a feeling something in the rest of my css is messing up my navbar!
Here is the link...
http://www.wisbechinlinespeed.co.uk/index-new.htm
I've googled the problems and tried most suggestions, but nothing seems to be working.
.menu-area{background: #F9F3DB; }
.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default
.navbar-nav > li > a,
.mainmenu ul li a ,
.navbar-expand-lg .navbar-nav .nav-link{color:#6D6C6B;font-size:16px;text-transform:capitalize;padding:10px 10px;font-family:'calibri',sans-serif;display: block !important;}
/*==========WISS logo==========*/
.navbar-default
.navbar-brand .navbar-text {
color:#6D6C6B;}
/*==========active page properties==========*/
.mainmenu
.active a,
.mainmenu
.active a:focus,
.mainmenu
.active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus ,
.navbar-default
.navbar-nav>.show>a,
.navbar-default
.navbar-nav>.show>a:focus,
.navbar-default
.navbar-nav>.show>a:hover{background: #6D6C6B; color: #F9F3DB; outline: 0;}
/*==========Sub Menu=v==========*/
.mainmenu
.collapse ul > li:hover > a{background: #6D6C6B;color: #F9F3DB; }
.mainmenu
.collapse ul ul > li:hover > a,
.navbar-default
.navbar-nav
.show
.dropdown-menu > li > a:focus,
.navbar-default
.navbar-nav
.show
.dropdown-menu > li > a:hover{background: #6D6C6B;}
.mainmenu
.collapse ul ul ul > li:hover > a{background: #6D6C6B;}
.mainmenu .collapse ul ul,
.mainmenu .collapse ul ul
.dropdown-menu{background:#d9d9d8;}
.mainmenu
.collapse ul ul ul,
.mainmenu .collapse ul ul ul
.dropdown-menu{background:#d9d9d8}
.mainmenu .collapse ul ul ul ul,
.mainmenu .collapse ul ul ul ul
.dropdown-menu{background:#d9d9d8}
/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
#media only screen and (min-width: 767px) {
.mainmenu
.collapse ul li:hover> ul{display:block}
.mainmenu
.collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu
.collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}
}
#media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu
.dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu
.dropdown-menu
.dropdown-menu > li > a{padding:16px 15px 16px 45px}
}
<!------ nav bar ---------->
<div id="menu_area" class="menu-area">
<div class="container">
<div class="row">
<nav class="navbar navbar-dark navbar-expand-lg fixed-top mainmenu">
<a class="navbar-brand order-md-last" href="#">WISBECH INLINE SPEED</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 mr-auto">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>News</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Club Information</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>About Us</li>
<li>Join Our Club</li>
<li>Club Statistics</li>
<li>Calendar</li>
<li>Results</li>
<li>Track Info</li>
<li>Official Documents</li>
<li>Sponsorship</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meet The Team</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>The Team</li>
<li>The Coaches</li>
<li>The Committee</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Training Tips</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Nutrition</li>
<li>Technique</li>
<li>Preventing Injuries</li>
<li>Maintenance</li>
<li>Equipment</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Galleries</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>2018</li>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
<li>Team Photos</li>
<li>Videos</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Media</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Press Reports</li>
<li>Archives</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Archives</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>1980's and 90's</li>
<li>2000's</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!------ end new nav bar ---------->
1) Transparent navbar but I want it to be #F9F3DB
2) navbar brand CSS doesn't change the text type, I want to change the color, font type and size
3) Background image of the entire page doesn't fill the page. I would like it to fit right to the bottom.

Answer 1

1) For the first problem the solution is to remove the div container, row container and menu-area. I don't know if they are needed but in many bootstrap examples there is just nav tag. example:
<!--Navigation Bar-->
<nav>
<div>
<img>
<div>
<a><!--Here put the logo image or text--></a>
</div>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
<li><a>.....</a></li>
</ul>
</div>
</nav>
Examples are here Bootstrap Navbar Examples
Done this, just set the background in the .mainmenu class:
.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 20px;
width: 100%;
background: #f9f3db; /*---background set---*/
}
2) For this the solution is easy because you use navbar-dark class that has color: white that takes over from your css rules. So you can do two things.Or remove that class if it is useless for you, or use !important after css rules. example:
.mainmenu a{
color: #fff !important;
}
3) Should be this the solution:
background-position: right bottom;