Mobile Header - Background Image - Remove Icon

I am making a one page site simply to link to the English version at a subdomain and a Portuguese version at another subdomain.

http://MeninaDaSelva.com

I am using a site background image via the Appearance > Customize settings. The background image appears behind the header (logo and menu area) on the desktop browser rendering of the site. But the site background color appears on the mobile rendering behind the logo and menu icon.

Is it possible for the background image to also be the background for the header area (logo & menu icon) on the mobile rendering?

Also, since this is a one-page site, having a menu is inappropriate. On the desktop browser rendering there is no menu, which is good. But on the mobile rendering the menu icon appears, though it doesn’t do anything.

How can I eliminate the mobile menu icon entirely from this site?

This can be with one new line of CSS code or with two separate CSS code additions. Whatever is best.

Thank you very much!

Hi,

Here is the CSS code to hide the menu bar:

.site-header .col-md-8 {
    display: none;
}

You can add the code to Customize > additional CSS.

Thank you, Awan! It works. I will add this to my set of codes for any other one page sites I create. This helps a lot.

Is there a way - to cause the site background image - to appear behind the logo (header area) on the mobile rendering of the website? It the first attachment you can see that the site background image IS behind the header area (logo.) But on the second attachment you can see that the site background image is NOT behind the header (logo area at the top.)

Any was to make this happen? Thanks again!

Dan Marshall

Hi,

Did you mean that you want the flag image to not cover the the face of the girl in the background image? if yes, please try this CSS code below:

@media and (max-width: 500px){
    .elementor-14 .elementor-element-2e18d52, .elementor-element-populated, 
    .elementor-widget-container {
        padding-top: 0 !important;
    }
    .elementor-14 .elementor-element-b340f88 > .elementor-element-populated {
        margin-bottom: 100px;
    }
    .elementor-element-3112d64 img, .elementor-element-d786b3c img {
        width: 100px;
    }
}

Thank you, Awan. I did try adding this code, although my objective is not to show the girl’s face. I will try to explain myself better. Sorry for my poor communication skills.

Here is a screenshot I just took - with the above code added to the site.

Her face is still covered. BUT - my objective is at the TOP of the screen.

Here is a fresh screen shot of the desktop browser rendering:

Do you see - at the very top of the screen? Where the logo is? Behind the logo (at the top of the screen) the background image appears. The background image that is specified in Appearance > Customize section.

Now, look again at the mobile rendering:

Do you see the top of the screen? Where the logo is? At the very top…

Behind the logo - the color appears. (At the very top.)

My objective is for the background image - to appear there. (At the very top - behind the logo.)

Is that possible?

Thank you again for being patient with me. I greatly appreciate the help.

Dan

Ah yes… I can see it. Please try to add this CSS code:

@media only screen and (max-width: 1024px){
  .site-header {
    background-color: transparent;
  }
}

Thank you, Awan. I added the code and it DOES cause the header area to be transparent. The background image is visible in the header area now.

However, it is not just ONE background pic occupying the whole screen, like on the desktop browser rendering.

As you can see in the attachment, the background image on the mobile rendering repeats. It appears in the header area, but then starts again in the main page content area.

I have left the CSS code for now to demonstrate this.

It looks awkward and unnatural. Is there anyway to have the background image simply cover the entire page? Just one pic without repeating?

On the right side of the attached screenshot you can see on the browser version this happens automatically.

Hopefully this makes sense. Thank you for all the help and your patience.

Dan

Hi there,

Hope this CSS code can fix the issue, please try this:

@media only screen and (max-width: 1024px) {
	.site-header, .site-header.float-header{
		position: absolute !important;
	}
}
@media only screen and (max-width: 850px){
	.elementor-14 .elementor-element.elementor-element-2e18d52 h3, .elementor-14 .elementor-element.elementor-element-2e18d52 h4{
		font-size: 22px;
	}
	.elementor-14 .elementor-element.elementor-element-2e18d52{
		padding-top: 235px;
	}
	.elementor-14 .elementor-element.elementor-element-2e18d52 img{
		width: 100px !important;
	}
}