Making a menu colour background causing issues

[3D-Cast]

I have 2 questions that i need help with. I'm wanting to add a colour background to the menu. I'm using the code below in with the dawn theme in the assets/base.css It works however I would like to make the colour box height a bit smaller and when I do insert this code I can no longer see the announcement bar, login icon and cart icon. How can i fix all this, Thanks

ul.list-menu.list-menu--inline {
background-color: #1a505b;
}

li > a#HeaderMenu-home {color: white;}

span.header__active-menu-item {
font-weight: bold;
color: white;
}

span {
font-weight: bold;
color: white;
}

ul#HeaderMenu-MenuList-2 {background-color: #1a505b;}

ul#HeaderMenu-MenuList-5 {
background-color: #1a505b;
}

ul#HeaderMenu-MenuList-5 > a {
color: white;
}

ul#HeaderMenu-MenuList-5 > li > a {
color: white;
}

svg.icon.icon-caret {
color: white;
}

details[open]>.header__menu-item{
text-decoration-color: white;
}

h1.header__heading {

padding-left: 1.5em !important;

}

.header__icons.header__icons--localization.header-localization {

padding-right: 5em !important;

}

@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {
justify-self: unset !important;
}
nav.header__inline-menu {
max-width: 100%;
display: flex;
}
ul.list-menu.list-menu--inline {
flex-grow: 1;
}

summary.header__menu-item.list-menu__item.link.focus-inset {
font-size: 22px !important;
}
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
font-size: 22px !important;
}

@media (max-width: 767px){

header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-social {

padding-left: 5px !important;

padding-right: 0px !important;

}

.header__icon--search span {

margin-left: 26px !important;

}}

[Mehran_Ali]

Hi @3D-Cast 

Can you please share you story URL and Password if its password protected so we can check and help you out

[3D-Cast]

Hi

I've got it the menu bar to work the way I would like for the desktop but now i'm having an issue with the mobile site. The menu constantly sticks out and wont hide behind the 3 line bar icon. Please see attached photos. Ive also added the code I have inserted for the menu bar

site is 3dcaststore.com.au 

[Mehran_Ali]

Hi @3D-Cast 

Can you please share you story URL and Password if its password protected so we can check and help you out

[3D-Cast]

3dcaststore.com.au, thanks