Canvas Support

Header Height

4 replies · opened Jun 17, 2019

CCoSurvivorJun 17, 2019

Hi there,
i'd like to know how i can keep a completely static header.

When i choose the "Static Sticky" header from the menu, the header is too wide.

I'd like it to be narrower, like how it looks after it shrinks when you scroll down.

Best is the header i see on this page here right now
http://support.semicolonweb.com/forums/forum/canvas-html/#new-post ...how can i get this.

Also on the right side of the header, where we see the search and shopping cart options...here i'd like to add icons linking to my fb, insta and twitter pages.
exactly how you have the profile/logout icon on this page where im typing right now.

thanks

SSemicolon WebSTAFFJun 17, 2019

Hello,

  1. You can consider using the Header Height CSS Generator: http://support.semicolonweb.com/header-height-css-generator/ to generate a Static Height for your Headers.

  2. Unfortunately, we currently do not provide Customization related Support according the Item Support Policy: https://themeforest.net/page/item_support_policy . So, you will need to add the Icons manually at the moment. However, we assure you that we are working on an Update to allow any Content in the Header which we will release soon and will send you a Notification once it is available. Meanwhile, consider checking out this Example Template: https://www.dropbox.com/s/rk1c5rxmzju2y38/header-social-icons.html?dl=1 .

Hope this Helps!

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

CCoSurvivorJun 18, 2019

That example template you shared for the social icons gave me just what i needed, thanks a ton for that :)

For the header....i will look forward to that update, still not getting it perfectly right.
i know very basic html but not very good on CSS.
i'm a little confused where i'm supposed to paste that code from the generator...is it in the "style.css" file or "responsive.css" ...or some other header css file i havent found ?

Thanks again for your help!

Best wishes
Rohit

CCoSurvivorJun 18, 2019

Looking through the html in the file you shared gave me all the info that i needed...had forgotten about the "STYLE" tag, i pasted the CSS generators code in there and everything worked just fine.

I was having issues adapting the social media icons with a smaller header, they always seemed to want to expand as per a wider header everytime i scrolled up.

In the source code for the file, under the "style" tag you will see:
#header-social-icons {
float: right;
margin: 34px 0 34px 10px;
-webkit-transition: margin .4s ease;
-o-transition: margin .4s ease;
transition: margin .4s ease;

This works well with the regular wide top bar that shrinks when you scroll down, but created an issue with the smaller header.
I changed the "margin" from 34px to 14px...and it works perfectly fine now.
I thought it was something that could be useful to others who are trying to customize this template, so i'm sharing.

and Thank You again for providing this file :)...it helped me understand what i needed to do...much appreciated!

However, there is one thing i still cant figure out, it has something to do with how your style sheets are designed, but hard to explain without showing you.
If you look at the header on this page of the forum where i'm typing right now...the header is completely static when you scroll, exactly how i'd like it to be.
But on the templates that i'm customizing, even when its set to static, whenever i scroll down the header seems to move a little at first and then readjusts. Its a fraction of a second...but really want to be able to make it completely static.
I'm not really asking for any customization, this is a line of code that obviously already exists within all the files i downloaded in the package. In the "Documentation" pages also the headers are completely static how i want...im just not finding which file and which line of code i need to change to achieve this...if you could let me know where to look, would be a big help again...
Thank you...

SSemicolon WebSTAFFJun 20, 2019

Hello,

Thank You so much for your Valuable Inputs on the Edits and Customization! We really appreciate them! :)

Consider following the Documentation > Start > Customization Section for instructions on Customizing Canvas.

This is Definitely Possible! Simply add the following CSS Code to make the Header Fixed to the Top, regardless of the stickiness of the Header: 

@media (min-width: 992px) {
	#header #header-wrap {
		z-index: 199;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFF;
		-webkit-transition: height .4s ease, background-color .4s ease, opacity .3s ease;
		-o-transition: height .4s ease, background-color .4s ease, opacity .3s ease;
		transition: height .4s ease, background-color .4s ease, opacity .3s ease;
	}
}

Make sure that you paste this code before the Generated CSS Code for the Header Height. 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