fixed head in construction demo template

1 reply·opened Oct 6, 2021
R
repsanmarcoOct 6, 2021

Hi could I put fixed menu and logo in canva-construction-template?
Now only the menu is fixed but for desktop device, Is it possibile to have it fixed for mobile?

S
SemiColonWebSTAFFOct 7, 2021

Hello,

  1. To make the Logo and Menu both Sticky, simply enclose them inside the #header-wrap DIV. That't it. Whatever is inside the #header-wrap DIV will become Sticky. Your new code should look like this:
<!-- Header
============================================= -->
<header id="header" class="header-size-sm" data-sticky-shrink="false">
	<div id="header-wrap">

		<div class="container">
			<div class="header-row">

				<!-- Logo
				============================================= -->
				<div id="logo" class="ms-auto ms-lg-0 me-lg-auto">
					<a href="index.html" class="standard-logo"><img src="img/logo-bieffe-carpenteria-metallica.jpg" alt="Bieffe Carpenteria Metallica"></a>
					<a href="index.html" class="retina-logo"><img src="img/logo-bieffe-carpenteria-metallica.jpg" alt="Bieffe Carpenteria Metallica"></a>
				</div><!-- #logo end -->

				<div class="header-misc d-none d-lg-flex">

					<ul class="header-extras">
						<li>
							<i class="i-plain icon-call m-0"></i>
							<div class="he-text">
								Chiamaci
								<a href="tel:+393494975710"><span>349 497 5710</span></a>
							</div>
						</li>
						<li>
							<i class="i-plain icon-line2-envelope m-0"></i>
							<div class="he-text">
								Email Us
								<a href="mailto:info@bieffecarpenteria.it"><span>info@bieffecarpenteria.it</span></a>
							</div>
						</li>
					</ul>

				</div>

			</div>
		</div>

		<div class="container">
			<div class="header-row justify-content-between flex-row-reverse flex-lg-row justify-content-lg-center">

				<div class="header-misc">

				</div>

				<div id="primary-menu-trigger">
					<svg class="svg-trigger" viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
				</div>

				<!-- Primary Navigation
				============================================= -->
				<nav class="primary-menu with-arrows">

					<ul class="menu-container">
						<li class="menu-item  current"><a class="menu-link" href="demo-construction.html"><div>Home</div></a></li>
						<li class="menu-item"><a class="menu-link" href="bieffe-carpenteria-godega-treviso.html"><div>Profilo</div></a></li>
						<li class="menu-item"><a class="menu-link" href="carpenteria-metallica-agricoltura-treviso"><div>Prodotti</div></a></li>
						<li class="menu-item"><a class="menu-link" href="vasche-raccolta-uva-bieffe-carpenteria.html"><div>Vasche</div></a></li>
						<li class="menu-item"><a class="menu-link" href="bieffe-carpenteria-contattaci.html"><div>Contatti</div></a></li>
					</ul>

				</nav><!-- #primary-menu end -->
			</div>
		</div>
	</div>
	<div class="header-wrap-clone"></div>
</header><!-- #header end -->
  1. To enable Sticky Header on Mobile Devices, simply use the following code:
<header id="header" class="header-size-sm" data-sticky-shrink="false" data-mobile-sticky="true">

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard