Maintain header height + other problem

1 reply·opened Jan 31, 2022
B
bcolledaJan 31, 2022

Here is the site:

https://redpinewebdesign.com/

Here is the code:

<header id="header" class="transparent-header dark header-size-custom" data-sticky-class="not-dark">
   <div id="header-wrap">
	<div class="container">
		<div class="header-row">

			<!-- Logo ============================================= -->
			<div id="logo">
				<a href="index.html" class="standard-logo" data-dark-logo="img/logo/white-logo.png"><img src="img/logo/color-logo.png" alt="Red Pine Logo"></a>
				<a href="index.html" class="retina-logo" data-dark-logo="img/logo/white-logo.png"><img src="img/logo/color-logo.png" alt="Red Pine Logo"></a>
			</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">

			     <ul class="menu-container">
				<li class="menu-item">
					<a class="menu-link" href="#content" data-scrollto="#content" data-offset="0"><div>About Us</div></a>
			        </li>
				<li class="menu-item">
					<a class="menu-link" href="#form-section" data-scrollto="#form-section" data-offset="0"><div>Contact Us</div></a>
				</li>

			    </ul>

			</nav><!-- #primary-menu end -->
		</div>
	</div>
   </div>
	<div class="header-wrap-clone"></div>
</header><!-- #header end -->

Problem 1:

I am using the header from rs-demo-hero-image.html.

On my site, when you lower the width of the page, the header height changes. I want it to stay the same height like in the example.

Problem 2:

Sometimes when you click the header icon, only About Us appears. I have no idea why this is happening and it almost seems random. If you play around with the width and the button for awhile, you'll probably see the problem. I've even had the entire header disappear.

S
SemiColonWebSTAFFFeb 1, 2022

Hello,

  1. Currently you are using:
.retina-logo {
    height: 40px;
}

.standard-logo {
    height: 40px;
}

We recommend using this CSS instead:

#logo img {
    height: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
}
  1. This is primarily done to reduce Javascript Computation Times and Memory Usage on the Browser to make everything work more smoothly on different browsers for your Website's Visitors. Ideally, in real-world usage, users do not resize the browsers to check your Website, and they simply Open your Website in either a Browser or a Mobile Device, so this will not cause an issue on either of them. We recommend checking this on directly a Browser/Mobile Device directly and if you are facing an issue with this, we will check this out and fix this asap. Additionally, we are continuously working on making the experience better and will try improving this behavior in the future releases of Canvas.

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