Menu Transparent Background on Subpages

Hello

I am having a problem with my menu transparency on subpages. I would like to have the same menu on my subpages, as it is on my main page, and that is, when I open the subpage the menu is transparent and when I scroll down it should have a background, on my desktop view, not on my mobile and tablet views.

When I add the site header code background transparency this is what happens at 1024x768, 1024x600 etc. resolution (white space on top):

This site is on my localhost still, and the code is:

html body {
	overflow: visible;
}

.preloader .pre-bounce1, .preloader .pre-bounce2 {
    display: none;
}
.preloader .spinner {
    background-image: url(http://localhost/mysite/wp-content/uploads/2019/11/LOADING-LOGO-mysite.gif);

	width: 60%;
height: 60%;
	margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: contain;
	background-position: center center;
}

/*Slider overlay */
.slide-item:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
	background:
		linear-gradient(
			rgba(0,0,0,0.6),
    rgba(0,0,0,0.1) 17%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 25%,
    rgba(0,0,0,0.0)
    )
		rgba(0,0,0,0.12); /*dim the background*/;
}

/*Slider primary button*/
.slide-inner .button-slider {
	font-family: 'Ubuntu-Bold', sans-serif;
	font-size: 12px;
}
a.roll-button.button-slider {
    background-color: rgba(234,63,217,0);
    border: 1px solid #ea1093;
    color: #ffffff;
}

.slide-inner .button-slider:hover {
	color: #ffffff !important;
	font-family: 'Ubuntu-Bold', sans-serif;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}

/*Slider line after text */
.text-slider .maintitle:after {
    background-color: #ea1093;
}

/*Site title */
.site-title a {
    font-family: 'Quicksand-Bold', cursive;
}

/*Menu */
.menu-item a {
font-size: 16px!important;
	font-family: 'Ubuntu-Regular', sans-serif!important;
}

#mainnav .sub-menu a {
	font-size: 14px!important;
	font-family: "Ubuntu-Regular", sans-serif!important;
}

#top .sub-menu {font-size: 12px; 
    background: #1684b0 !important;
}

#mainnav ul li ul:after {
      background-color: #ea1093;
    }

.sub-menu li a:hover {
	color: #ea1093 !important;
}

.sub-menu, .sub-menu * { background: rgba(0,0,0,0.2) !important;
}

#top .sub-menu:hover {
    background: #2e2e2e !important;
}

.header-wrap .container {
    width: 90%;
}
#site-banner {
    max-width: inherit;
    width: 100%;
	
}

/*Slider Text */
.text-slider .maintitle{
  font-family: 'Raleway', sans-serif;
	font-size: 48px;
}

/*Footer Copyright text */
.site-footer {
font-size: 13px;
}

/*Mobile view */
@media only screen and (max-width: 320px) {
nav {
	font-size: 13px;
	max-height: 340px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	::-webkit-scrollbar { 
    display: none; 
}
.text-slider .maintitle{
  font-size: 14px;
  line-height: 25px;
}

.text-slider .subtitle{
  font-size: 8px;
  line-height: 26px;
}
	
	
	/*Footer widget font size */
	.footer-widgets .widget-title {
        font-size: 15px;
		 text-align: center;
    }
    .footer-widgets .widget {
        font-size: 14px;
			text-align: center;
    }

	/*Footer Copyright text */
.site-footer {
font-size: 10px;
	text-align: center;
}
	
}
	
/*Tablet view */	
@media only screen and (min-width: 320px) and (max-width: 768px) {
nav {
	font-size: 13px;
	max-height: 420px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	}
		::-webkit-scrollbar { 
    display: none; 
}
.site-header.float-header {
	position: fixed !important;
	top: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	}
	.btn-menu {
    float: right;
    margin: -36px 15px 0 0;
}
	::-webkit-scrollbar { 
    display: none; 
}
	
	.text-slider .maintitle{
  font-size: 18px;
  line-height: 25px;
}

.text-slider .subtitle{
  font-size: 18px;
  line-height: 26px;
}
	/*Footer widget font size */
	.footer-widgets .widget-title {
		 text-align: center;
    }
    .footer-widgets .widget {
			text-align: center;
    }

	/*Footer Copyright text */
.site-footer {
	text-align: center;
}
	
}

/*Laptop view */
@media only screen and (min-width: 768px) and (max-width: 783px) {
	.header-wrap .container {
    width: 95%;
	text-align: left;
}		
	nav {
	font-size: 13px;
	max-height: 340px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	}
		::-webkit-scrollbar { 
    display: none; 
}
	.site-header.float-header {
	position: fixed !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	margin-top: 12px;
	margin-bottom: 0;
	}
	.btn-menu {
    float: right;
    margin: -5px 15px 0 0;
	}	
	
}

/*Desktop nad laptop view */
@media only screen and (min-width: 785px) and (max-width: 1024px) {
	
		nav {
	font-size: 13px;
	max-height: 340px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	}
		::-webkit-scrollbar { 
    display: none; 
}
	
.site-header.float-header {
	position: fixed !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	}

}

/*Desktop view */
@media only screen and (min-width: 1024px) {
.header-wrap .container {
    width: 95%;
	text-align: left;
}
	#mainnav ul.menu > li.menu-item {
    padding: 0 7px !important;
	}
	.site-header{
		background-color: transparent !important;
	}
}

When I move the last code part:

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

This problem is not there, the white space disapears, the subpage is normal, but there is no menu header transparency.

Thank you & Best regards, BR

Hello BR,

I don’t think that I can provide much help here without a link to an affected page, unfortunately. So can you please provide a link?

Kind Regards, Roman.
aThemes Support

The site is still on my localhost, but I have the same code and issue on my other page. So on this site I would like to have a transparent menu background on my desktop, just as on my main page, when I open it, and when I scroll down the menu background should turn black, or some other color. So to cut it short :slight_smile: , the subpage menu look and behaviour should be as on my main page.

Here is the site link:

My page

Thank you, BR

Okay BR, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#masthead:not(.float-header) {
    background-color: transparent;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Tried it, the white space is still there.

Tried it, the white space is still there.

Can you please provide a link to an affected page?

Kind Regards, Roman.
aThemes Support

I changed the code at my existing page:

My page

I added the code part you wrote at the end of my CSS, at the Desktop view, because I would like to have the transparent menu background only on my subpages on Destkop view, on tablet and mobile it should remain as it is.

Okay, here is what I see there:

I don’t see the white space like on your screenshot at the top of this topic.

Do you see something else?

Kind Regards, Roman.
aThemes Support

Try another resolution 1024x768, for example Aplle iPad view, and you’ll see it.

I think it is because of my CSS code, because I have different settings for different resolutions.

Okay, try to add this CSS code as well:

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

Kind Regards, Roman.
aThemes Support

It is still there

I already have

/*Desktop nad laptop view */
@media only screen and (min-width: 785px) and (max-width: 1024px) {

Hello,

I’ve just checked your website once again, but I don’t see that code active on 1024px.

How exactly did you add it? Did you add it in CustomizeAdditional CSS section?

Kind Regards, Roman.
aThemes Support

My code in Additional CSS is

/*Desktop view */
@media only screen and (min-width: 1024px) {
.header-wrap .container {
width: 95%;
text-align: left;
}
#mainnav ul.menu > li.menu-item {
padding: 0 7px !important;
}
#masthead:not(.float-header) {
background-color: transparent;
}
}

And the white space is still there, or better said, the menu background is transparent, but it is not over the slider, the slider is under the menu.

I waould like to have the transparent menu over the slider. So the look of my menu shoould be the same on Subpages as it is on my Main page. When I open the my Subpage, the menu should be over the slider, and transparent, and when I scroll the menu it should turn lack again.

The only thing that is missing is transparent background menu oer the my cover photo when I open the page.

The only visual problem is when I test my site on resolution 1024x768 or other 1024 like Apple iPad, turned.

Thank you for your help.

Please add this CSS code in Customize → Additional CSS section like I suggested above:

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

Kind Regards, Roman.
aThemes Support