Problem with logo size

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

Here is the website:
https://redpinewebdesign.com/

Here is the code:

<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>
.retina-logo {
    height: 40px;
}

.standard-logo {
    height: 40px;
}

The problem:

I initially had only the retina-logo, but if I only use that, it won't appear on some computers (certain types of Macs?). So, I added standard-logo and now it appears. The problem is the standard-logo is massive. I am using the same images as retina-logo and even changed it to the same CSS size, as shown, but it's still too big!

Also, another small problem is that sometimes there is a white line that appears horizontally in the middle of the header when transparent.

S
SemiColonWebSTAFFJan 31, 2022

Hello,

Since there is a Pre-Defined Size of the Header, the Logo gets resized according that. Simply add the .header-size-custom Class to the #header Tag and then your applied Logo Size of 40px will work fine. Additionally, you will need to remove the .full-header Class from the #header Tag in order to remove the Borders. Simply consider using the following code:

<!-- Header
============================================= -->
<header id="header" class="transparent-header dark header-size-custom" data-sticky-class="not-dark">
	<div id="header-wrap">
		<div class="container-fluid px-4">
			<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 -->

				<form class="top-search-form" action="search.html" method="get">
					<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
				</form>

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

This should 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