Full Header and Slider Image Issue.

PpesaindonMay 21, 2023

Hi,

The header looks fine on large screens but when screen size gets smaller the hamburger disappears off to right and a gap gets created between header and slider background image. I can not figure out why. Here is custom code I have in custom file which and also HTML code. I also included a mobile shot from chrome.

#header {--cnvs-header-height: 80px;}

#logo img {padding-left: 0px; padding-top: 12px; padding-bottom: 12px; padding-right: 10px;}

&lt;!-- The Main Wrapper
============================================= --&gt;
&lt;div id="wrapper"&gt;

	&lt;!-- Header
	============================================= --&gt;
	&lt;header id="header" class="full-header border-bottom-0" data-sticky-shrink="false" data-mobile-sticky="true"&gt;
		&lt;div id="header-wrap"&gt;
			&lt;div class="container"&gt;
				&lt;div class="header-row"&gt;

					&lt;!-- Logo
					============================================= --&gt;
					&lt;div id="logo"&gt;
						&lt;div&gt;

						&lt;/div&gt;
						&lt;div&gt;
							&lt;div  style="font-size: clamp(1rem, 0.8000rem + 1.0000vw, 2rem); font-weight: 500; line-height: 90%"&gt;
								Connecticut
							&lt;/div&gt;
							&lt;div style="font-size: clamp(0.6875rem, 0.6500rem + 0.1875vw, 0.875rem); font-weight: 400; line-height: 90%; text-align: center"&gt;
								Scrap Metal Recycling
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;!-- Logo End
					============================================= --&gt;

					&lt;div class="header-misc"&gt;
						[ 978-360-8398](tel:978-360-8398)
					&lt;/div&gt;

					&lt;div class="primary-menu-trigger"&gt;
						&lt;button class="cnvs-hamburger" type="button" title="Open Mobile Menu"&gt;
							&lt;span class="cnvs-hamburger-box"&gt;&lt;span class="cnvs-hamburger-inner"&gt;&lt;/span&gt;&lt;/span&gt;
						&lt;/button&gt;
					&lt;/div&gt;

					&lt;!-- Primary Navigation
					============================================= --&gt;
					&lt;nav class="primary-menu"&gt;

						&lt;ul class="menu-container"&gt;
							&lt;li class="menu-item"&gt;[Home](demo-coworking.html)
							&lt;li class="menu-item"&gt;[Metals](demo-coworking-about.html)
							&lt;li class="menu-item"&gt;[Cars](demo-coworking-price.html)
							&lt;li class="menu-item"&gt;[Dumpsters](demo-coworking-price.html)
							&lt;li class="menu-item"&gt;[Services](demo-coworking-single.html)
							&lt;li class="menu-item"&gt;[Contact Us](demo-coworking-contact.html)
						

					&lt;/nav&gt;
					&lt;!-- Primary Navigation End
					============================================= --&gt;

				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="header-wrap-clone"&gt;&lt;/div&gt;
	&lt;/header&gt;
	&lt;!-- Header End
	============================================= --&gt;
	
	&lt;!-- Slider
	============================================= --&gt;
	&lt;section style="height: calc(100vh - 80px); background-image: url('images/beam.jpeg'); background-position: left center; background-repeat: no-repeat; background-size: cover;"&gt;

            ...

	&lt;/section&gt;

SSemicolon WebSTAFFMay 21, 2023

Hello,

Please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.