Transparent Nav on Mobile

[noizepro]

Hello!

I found code in another thread which I can’t find to make my nav bar transparent over a full-width image, but I need to correct a couple of things and could not find this specifically:

1. It has a white background on mobile and you can’t see the links. How do I make it transparent like the desktop version or make the background black?
2. Also, my news and blog pages are overlapping the navigation since I can’t add the photo there. Can I adjust just the archive pages specifically to move down and add a black background just to the category archives page so that the menu links show up?

Below is my current code and links to the development site. Any help would be very much appreciated.
http://um3.bd7.myftpupload.com/
http://um3.bd7.myftpupload.com/category/blog/

Thanks!

/*TRANSPARENT HEADER*/

.x-navbar {

background: none;
border-bottom: 0px;

}

.x-main.full {

margin-top: -92px;

}

.desktop .sub-menu {
background-color: #000;
}

[friech]

Hi @noizepro,

Thank you for writing in, please remove that custom CSS and Add this instead.

	.page header.masthead {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.page header.masthead .x-navbar {background-color: transparent;}
	body:not(.page) header.masthead .x-navbar {background-color: black;}

Clear your caching plugins and browser’s cache after updating the code.

Hope it helps,
Cheers!

[noizepro]

Thank you! That is much better! Can I make the individual menu items on mobile have a black background? - I see there is a box around each one.

[noizepro]

I may have figured that out. I added a few adjustments after what you gave me. It looks good in the previews, but could you Please let me know if you forsee any problems with how I did it.
Thanks so much for your assistance!

Katie

.x-navbar {
border-bottom: 0px;
}

.desktop .sub-menu {
  background-color: #000;
}

.x-btn-navbar {
		color: rgb(149, 1, 1);
}

.x-btn-navbar.collapsed {
	color: rgba(255, 255, 255, 100);
}

.x-navbar .mobile .x-nav li>a {
    background-color: rgba(0, 0, 0, 0.55);
}

[friech]

Hi Katie,

Yup, that seems to do the trick.

Cheers!

[noizepro]

Great. Thanks again!

[paul.r]

You’re welcome!