Menu on Mobile Version

I’d appreciate some help with the appearance of the menu on the mobile version of my site at https://www.accentsouthwest.com. I’ve used some CSS to enhance it (thanks Rebecca Martin for making available your https://www.rebeccagracedesigns.com/blog/change-width-of-mobile-menu) and added a line to change the background color to match the rest of the site, but I’ve gotten nowhere with how to change the font color, type and size, as well as the background color of the logo section.

 

/* Half Width Mobile Menu */

.header-display-mobile .header-title-text {

width: 87vw !important; /*width of the header menu */

font-size: 0.5rem !important; /*site-title font-size */

}

.header-menu {

width: 87vw; /*width of the header menu */

}

#page {

transition: opacity 0.75s; /* transparency animation */

}

.header--menu-open #page {

opacity: 70%; /* makes page transparent when mobile menu is open */

 

background-color:#5f636a; /*background color of the header menu */

}

 

.header-menu-nav-folder-content {

justify-content: flex-start; /* vertical alignment of navigation */

text-align: left; /* navigation text alignment */

color:#ffffff; /*text color of the header menu */

background-color: #5f636a; /*background color of the header menu */

}

.header-menu-nav-folder:not(.header-menu-nav-folder--active) {

display: none; /* hides non-active folder */

}

 

.header-menu-cta {

width: 60vw; /* width of button */

}

.header-menu-cta a {

min-width: unset !important;

}

 

Thanks for any help with this.

Joe

Use this code

.header-menu-bg.theme-bg--primary {
    background-color: #699 !important;
}