Align Text in Button

Halfway there.  Fixed the alignment.  rem out padding leftJust need to get the hover part.  Text turns white on hover.

#header ul.nav > li > a{
    font-size: 40px;
    font-weight: 400;
    color: #0297d7;
    padding-top: 3px;
    padding-bottom: 0;
    /*padding-left: 30px;*/
    text-transform: capitalize;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

Select allOpen in new window

Hi,

the problem you have is before scrolling the background is blue then after scrolling the background is white
So you need classes base on the background as white on white or blue on blue is no good ..

so
the headr have this class name

header-continer

Select allOpen in new window

and when it is active scrolled it change to 

header-continer  active

Select allOpen in new window

so you need to edit

header-continer.active {
    background-color: rgb(255, 255, 255, 1.0);
   /// your code here ///
}

Select allOpen in new window

in style.css line 413

or create a new class

#header .active ul.nav > li > a{ 
   /// your code here ///
}

Select allOpen in new window

I have a class attached to the button already.

<li class="nav-item"><a class="nav-link btn btn-primary" type="button" href="Join-Us.html">Join</a></li>

Select allOpen in new window

I used this before and ir worked.  However since it already has a class I am trying to add this to the current class.

.btn:hover {
    background: #2196F3;
   color: white;
}

.btn .join { 
    color: dodgerblue;
}

.btn:hover .join {
    color: white;
}
.btn .log { 
    color: dodgerblue;
}

.btn:hover .log {
    color: white;
}

Select allOpen in new window

nav-button a:hover{
   /*color: #04b1fb;*/
   color:white;   
}

#header ul.nav li .nav-link.active{
   color: #04b1fb;
   /*overflow: hidden;
   float: left;*/
   display: block;
   /*color: black;*/
   text-align: center;
   padding: 14px;
   text-decoration: none;
   font-size: 20px;
   border-bottom: 3px solid transparent;
   border-bottom: 3px solid #04b1fb;
}
#header ul.nav li a:hover{
    color: #04b1fb;
}

Select allOpen in new window

but it also turns the links white.

and tried this as well....

#header .active ul.nav > li > a{ 
   color:white;
}

Select allOpen in new window

only want the two buttons "Join" and "Login" to turn white onhover.

Close... it works fine when the background is blue.  Links are the proper color on hover as well.  Buttons act as they should.  Problem is when you scroll down.  The links should be blue and the two buttons should have blue letters with a blue border.  The right combination is in this code somewhere...

 /*--------------------*/
/* HEADER */
/*--------------------*/
#header .nav-menu,#header .search-bar{
    position: fixed;
    top: 0;
    /*padding-top: 110px;*/
   padding-top: 20px;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: #000000;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
#header .nav-menu.active,#header .search-bar.active{
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
}
.nav-menu .section{
    z-index: 991;
}
#header .nav > li:first-child a{
    padding-top: 0px;
}
#header .nav{
    font-family: 'Open Sans';
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: absolute;
    top: 110px;
    bottom: 0;
    margin: auto;
    float: none;
    left: 0;
    right: 0;
}
#header .nav > li{
    position:relative;
    width:206px;
}
#header ul.nav > li > a{
    font-size: 40px;
    font-weight: 400;
   color: #0297d7;
    padding-top: 3px;
    padding-bottom: 0;
    /*padding-left: 30px;*/
    text-transform: capitalize;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

nav-button {
   border:solid;
   color: #ffffff;
   /*overflow: hidden;
   float: left;*/
   display: block;
   /*color: black;*/
   text-align: center;
   padding: 14px;
   text-decoration:none;
   font-size: 20px;
   /*border-bottom: 3px solid transparent;
   border-bottom: 3px solid #04b1fb;*/
   }
nav-button a:hover{
   /*color: #04b1fb;*/
   color:white;   
}

#header .active ul.nav > li > a{ 
   color:#04b1fb;
}

#header ul.nav li:nth-last-child(1) a:hover,
#header ul.nav li:nth-last-child(2) a:hover {
  color: white;
}

#header ul.nav li .nav-link.active{
   color: #04b1fb;
   /*overflow: hidden;
   float: left;*/
   display: block;
   /*color: black;*/
   text-align: center;
   padding: 14px;
   text-decoration: none;
   font-size: 20px;
   border-bottom: 3px solid transparent;
   border-bottom: 3px solid #04b1fb;
}
#header ul.nav li a:hover{
    color: #04b1fb;
}

#header .nav > li ul.child-item{
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display:none;
    position: absolute;
    left: 200px;
    top: 20%;
    padding: 15px 25px 15px 25px;
    background-color: rgb(28, 28, 28);
}
#header .nav > li ul.child-item:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #1c1c1c;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 10px;
    left: -17px;
}
#header .nav > li:hover ul.child-item{
    display:block;
}
#header .nav > li ul.child-item > li a{
    font-size: 24px;
    font-weight: 300;
    color: #828282;
    padding: 0;
    line-height: 32px;
    text-transform: capitalize;
}
#header .nav > li ul.child-item > li a:hover{
    color:#000000;
}

Select allOpen in new window

This fixed it.  Working perfectly.

nav-button a:hover{
   color: #04b1fb;   
}

Select allOpen in new window