Svg logo full width and full height of header centered above menu

Hello, Rikard
thank you, but it’s didn’t change anything. Please advise. Thanks again! :)

Ok, it sort of worked. I realised that in performance I had the css and js merged, and I’m using a child theme so I couldn’t see the changes, but now I can.

Now the logo is full height and full width, and I added in sizing since I’m using an svg –

.html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
	width: 100% !important; /* required for svg */
	height: auto !important;
}

The main menu, below, is now lying over top of the logo – I’m guessing that the main menu needs to have some css change to positioning, eg, relative, to make it sit properly, since setting a custom height would not be responsive, based on this code?

Also, the logo is not full width and height on mobile, so I need help with that as well, please :)

Thanks, vinay, I will try that, however, that doesn’t address the issue if the position of the main menu on top of rather than underneath the header logo. Could you please send me some cash to correct that.

Also, I’m not quite sure how to set the css as per your suggestion, vinay. Could you please send code for setting the background to cover the entire area, plus css the logo without the gradient. Thanks!

I’ve removed that mobile css with the min height – it was copied from another site and this is still very much a work in progress!
Same for the About page – I’m rebuilding each page to remove the old Envira shortcodes and replace with your masonry gallery.
The main menu needs to sit properly, so below the header logo, not inside it. the mobile needs to be full width and height with a burger centered below.
I could fiddle and hide the header and use a fullwidth image and a secondary menu for the main pages but everything generated from searches or single post pages still need a proper logo, so that’s not a great option, since it’s a blog site.
Here are two screenshots. the first is the desktop and the second is mobile.

Main menu needs to be below the header logoMobile header logo needs to fill space with burger centered below

Thanks again! :)

Thank you! Almost there! I added in some vertical spacing for the burger as it was sitting centered over top of the logo/background, so I added this for the header height –

    .responsive #top #wrap_all .av-logo-container {
         width: 100%;
         max-width: 100%;
		 margin-bottom: 80px !important; /* adjust as required */
     }

And this for the burger –

     .responsive #top .av-main-nav .menu-item-avia-special {
       display: block;
       left: 50%;
       transform: translateX(-50%);
	   margin-top: 80px !important; /* adjust as required */
     }

So, all that is left is how to fix the main menu placement on the desktop version, please :)

Sorry, but that didn’t work at all. The main menu is still placed directly over the vertical middle of the header logo, the breadcrumbs are still hidden underneath when the header loads, as well as a top portion of each page. I’m hoping that you can help me resolve this soon. If there was an easy way to place a fullwidth easy slider above the header area on every page, that would solve the issue, but I think that’s not possible?

I’m adding in the admin login so you can have a look as well :)

Guenni007, the second option is perfect!!!!!

Quite frankly, it’s a very problematic logo on numerous levels, especially on screen! It’s much too panoramic so looks lost on mobile when the entire logo fills the top space. Since it’s also full of fine lines and a gradient, that all tends to get muddled. While the idea of the radiating bands is lovely, it’s really a print piece.

Thank you so much for the input! Could you please send me the css to apply your second option :)

https://webers-testseite.de/Latitude65logo2.svg

Sorry for the lengthy delayed response! Now it’s perfect on desktop but I want it to be the same behaviour on mobile, ie, 300px high and cropped as you scale down, but with the burger centered, below. So I’d like to keep the logo 300px high, consistently, on all devices – cropping left and right is fine.

I had no idea that you could change the parameters for the svg with an editor! thank you, guenni007! I’ve edited the svg file, loaded it, and changed my custom height to 300px, so now the main menu is perfect on desktop! I also added in sizing for the image to make the svg show up –

.html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
	width: 100% !important; /* required for svg */
	height: auto !important;
}

.html_header_top #top .av_header_stretch .container {
    width: 100%;
}

.header_color img {
	width: 100% !important; /*required for svg */
	height: 300px !important;
	margin: 0px !important;
	padding: 0px 0px 0px 0px !important;
}

I removed the old css styling for mobile and simply copied the desktop css again to keep it exactly the same but now it’s defaulting to a long band of the entire logo with white space at a smaller breakpoint, and the burger is not below.

Here’s what I have for under 990px –

	/* logo */

	.html_header_top.html_logo_center .logo {
	    left: 0;
	    -webkit-transform: translate(0,0);
	    -ms-transform: translate(0,0);
	    transform: translate(0,0);
		width: 100% !important; /* required for svg */
		height: auto !important;
	}

	.html_header_top #top .av_header_stretch .container {
	    width: 100%;
	}

	.header_color img {
		width: 100% !important; /*required for svg */
		height: 300px !important;
		margin: 0px !important;
		padding: 0px 0px 0px 0px !important;
	}
		
	/* burger */
	
    .responsive #top #wrap_all .main_menu {
      left: auto;
      width: 100%;
      right: auto;
    }

    .responsive #top .av-logo-container .avia-menu {
      margin: 0 auto;
      float: none;
    }

    .responsive #top .av-main-nav .menu-item-avia-special {
   		display: block;
    	left: 50%;
   		transform: translateX(-50%);
   		margin-top: 80px !important;
    }
 
 
   	/* burger closed */

   	.header_color .av-hamburger-inner,
   	.header_color .av-hamburger-inner::before,
   	.header_color .av-hamburger-inner::after {
   		background-color: #666 !important;
   	}
 
       /* burger open */

   	#top .header_color .is-active .av-hamburger-inner, 
   	#top .header_color .is-active .av-hamburger-inner::before, 
   	#top .header_color .is-active .av-hamburger-inner::after {
   	    background-color: #000 !important;
   	}
 
 

Thanks again for your help! :)

That’s perfect! Thank you so much :))))