Header issue on the mobile site

Done.

Now in Customizer > Backgrounds > Header set the background image. And add this CSS:

@media (min-width: 769px) {
    .main-navigation {
        background-color: transparent;
        position: relative;
    }
    .site-header {
        position: relative;
        margin-top: -60px;
    }
    .site-header:before {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
    }
    .inside-header {
        position: relative;
    }
}

Then we just need to deal with the overlay for the image. Let me know when the above is done.

Done.

I already have this code from before:

@media (max-width: 768px) {  
  
	.inside-header {        
		display: flex;        
		flex-direction: column-reverse;    
	}	    
	
	.site-branding {  order: 10; }	    
	
	.site-header {        
		background-image: none;        
		background-color: #000000;    
	}		
	
	.header-widget { margin-top: 40px; }
}

Need any change here?

That CSS can stay - its required for the mobile layout.
I edited the CSS here if you can update then i think thats it :)

Hi David!

That really resolved the issue - finally! :)

Thank you so much for the hard work!!

Can you tell me what are the break-points used for the theme, so that I can target the same breakpoints for some minor CSS tweaks?

Best regards,
Hasan

This article covers the break points:

https://docs.generatepress.com/article/responsive-display/

Glad we got there, i thought it best we get rid of the header element as you already done the hard work with the header widgets :)

Thank you so much David!

I am so happy that it is finally fixed. Awesome support!! :)

Glad we could be of help. Thats a really cool header :)

Hi David,

Found an additional header issue. The background color of the expanded menu has also become transparent. How to make that black?

Thanks!

Is this on the mobile header? I am not seeing the issue..... browser cache?

It's on the iPad view only. Not using any caching yet, since the site is under development.

Click and expand the menu while on the iPad view to see this.

aah sorry my bad i edited the CSS here the only change was moving the min-width from 768px to 769px.

That fixes it, thanks!! :)

Great to hear that