Navbar Spacing and Formatting Of Text

This is the site I am constructing: https://joshuadavisvideoresumeextension.com/

Over the years I collected a lot of css scripts that I acquired either from the forum or from Roman.

I tried applying each one at a time to try to correct the issues I am now experiencing.

I will first list the troubleshooting for which I need help and then I will show the CSS that I have in the Additional CSS.

Troubleshooting needs:

1) I want to get the navbar further up.

2) Menu text color:

The following CSS is not changing the text color

/////////////////////////////////////////////
/////////////////////////////////////////////
/* Menu background color before hover */
#mainnav{
background-color: #040500;
}
///////////////////////////////////////////////
//////////////////////////////////////////////

/* Menu text color before hover */
#mainnav ul.menu > li > a{
color: #effa45 ;
}

/* Menu text color during hover */
#mainnav ul.menu > li > a:hover{
color: #ff0000;
}

I went through the customizer to find if
I can change the text color and background
color with no success.

3) <I AM TEMPORARILY USED THE MARGINS in ELEMENTOR
FOR THE HEADER SECTION TO CREATE SPACE BETWEEN IT AND
THE MENU>

In mobile mode, the screen is a little to
wide. There appears to be a little overflow.
Part of the telephone number runs to the
next line.

I am using Elementor.

I used an Inner Section inside of a section for
the “Joshua Davis Video Resume Extension.”

Here is the code I used in the text box:

<p style=”font-size: 50px;”>Joshua Davis Video Resume Extension</p>
<p style=”font-size: 30px;”>201-396-2569, [email protected]</p>

======> Here is the entire CSS that is in the “Additional CSS”<=====

/*Hide page title*/
.page.hentry .title-post {
display: none;
}

@media only screen and (max-width: 1024px) {
.site-header,
.site-header.fixed {
position: absolute !important; }

.btn-menu {
float: right; /* align the menu to the right*/
line-height: 0px; /* I modified this line*/
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}

.site-header {
background-color: transparent !important;
padding-top: 0;
}

header#masthead div.col-md-4.col-sm-8.col-xs-12,
header#masthead img.site-logo {
margin-bottom: 0;
margin-top: 0;
}

.page header.entry-header {
display: none;
}

.page-header {
display: none;
}

.site-title {
visibility: hidden;
}

.site-description {
visibility: hidden;
}

/* Menu text color before hover */
#mainnav ul.menu > li > a{
color: #effa45 ;
}

/* Menu text color during hover */
#mainnav ul.menu > li > a:hover{
color: #ff0000;
}

/* Menu background color before hover */
#mainnav{
background-color: #040500;
}

.the-top-menu{
width: 100%;
}

.page-wrap {
padding: 1px 0 1px;
clear: both;
margin-top: 0px;
}

.panel.widget,
.panel-grid-cell section {
padding-top: -10px;
padding-bottom: -10px;
}

.so-panel.widget {
padding: 0;
}

.table-container
{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}

table.center {
margin-left:auto;
margin-right:auto;
}

@media only screen and (max-width: 767px){
.btn-menu {
float: right;
margin: -40px 15px 0 0;
}

#mainnav-mobi {
top: 20px;
}
}

.content-wrapper {
padding-top: 0px;
}

—————————–
4) I want to get the logo further to the left
in desktop and tablet mode.

I hope you can help me resolve this problem.

Thank you,

Joshua Davis

The page I need help with: [log in to see the link]