I am preparing to move a blog over to the Sparkling theme on Wordpress and have set up the menu to match my primary website. However when you shrink the screensize or go to mobile the hamburger menu background becomes transparent so it is difficult to see the menu options and the hamburger itself drops below the navbar background. Any help would be appreciated. You can find my test site here:
Hi
Its not a WordPress at all, please provide actually URL with our theme
It most definitely is Sparkling theme on Wordpress. Only the URL above is the wordpress staging site. Don’t go to rewardscanada.ca or any of the links from the menus as that takes you to my live html site.
Hi there
Ok, I messed with your live URL site 
Can you please provide a screenshot of the problem?
The menu is jumping on the second line when I resize the window, is this your problem?
Regards
Yes here are the screenshots and it is the menu jumping down and then when you click on it there is no background so you cannot see the menu items
Any luck in helping figure out what may be the issue here?
Just following up if you have any solutions as I’ve tried some things I found on Google but I cannot get the menu to show properly on mobile.
Hi @patricks
Try this code:
@media (max-width: 767px){
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
background: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #6d6d6d;
}
.navbar-nav>li {
background: #fff;
}
}
That worked for the background - thank you!
Any suggestions on how to get the hamburger menu icon back into the header on mobile?
Hi
You can use this code:
#logo {
display: inline;
}
Let me know if it worked 
Yes this worked however it seems to cancel out the margins I had on the logo to center it.
Hi
You can add extra margings by this code:
#logo {
display: inline;
margin: 10px 0px
}