Canvas Support

primary-menu and sticky-menu logo animation help

3 replies · opened Apr 18, 2019

AaguyowensApr 18, 2019

Greetings,

I need help modifying the logo element within primary-menu/sticky-menu (header) so that it follows the same animation as the ul/il nav elements. My logo image is 60px in height and I wanted to maintain that size the moment the site is loaded but the logo size increases to 100px. I was able to change that with the following code in the Sticky Header section of style.css:

#logo img {
	height: 60px;
	-webkit-transition: height .4s ease, opacity .3s ease;
	-o-transition: height .4s ease, opacity .3s ease;
	transition: height .4s ease, opacity .3s ease;
}

However, the logo element is confined to the top of the logo area and I have been having trouble centering the element/image with 20px remaining on the top and bottom margins of the logo area. I even tried margin-top: 20px; margin-bottom: 20px; (since the header is 100px) so I am assuming I am doing something wrong here.

Then I need the logo element to shift down with the same animation as the primary-menu nav ul il elements (navigation bar/header menu items) as the user scrolls down the page. I am unsure what JS function was used to animate the ul il elements, so I would need help there as well. Thank you for your consideration and time helping me with this.

SSemicolon WebSTAFFApr 19, 2019

Hello,

The most important rule for customizing the Template is to never Edit the Default Files. Please make sure that you are adding your Custom Codes in the css/custom.css File for which complete instructions can be found in the Documentation > Start > Customization Section.

Use the following CSS Code: 

#logo img {
	-webkit-transition: height .4s ease, opacity .3s ease, margin .4s ease;
	-o-transition: height .4s ease, opacity .3s ease, margin .4s ease;
	transition: height .4s ease, opacity .3s ease, margin .4s ease;
}

#logo img {
	height: 60px;
	margin-top: 20px;
	margin-bottom: 20px;
}

#header.sticky-header:not(.static-sticky) #logo img {
	height: 60px;
	margin-top: 0;
	margin-bottom: 0;
}

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.

AaguyowensApr 29, 2019

Defining the #header.sticky-header:not(.static-sticky) #logo img was the script I was missing. Thank you!

SSemicolon WebSTAFFApr 30, 2019

Hello,

Really Glad that your issues were resolved. Thanks for your Patience.

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

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