Canvas Support

Short Header Nav All The Time

8 replies · opened Jun 11, 2020

CcarabsJun 11, 2020

Hello,

In V5, I have a page with a short header nav, no footer, and a 100% tall div to display a map. The header is using the classes "sticky-header dark full-header", which allows the header to be very short (60px). I use my own JS to figure out the size for the div.

In v6 this is just not working. The header is always much taller, even if I apply the same classes. I just can not find a way to override the height at all.

I understand you do not provide support for customizations within my design. But maybe you already have an answer on how we can have a "short" header? I am pretty much looking for the height of the header when scrolling, but all the time.

Thanks.

CcarabsJun 11, 2020

I think I finally found the issue. The JS is adding padding to the .menu-link elements. I added some styling to my page to override this. Wish it was easier... but I found it.

SSemicolon WebSTAFFJun 11, 2020

Hello,

Thanks for your Patience!

The Headers now have Flexible Heights and you can choose to Modify the Logo Heights and Menu Paddings according to your needs with CSS Customizations for Both Static and Sticky headers.

  1. For a 100px Header Height, use:
  1. For a 60px Sticky Header Height:
  1. Disable Header Shrinking on Sticky which will keep the Header Height 100px even when Sticky:

And instead of using the .sticky-header Class to Make your Header Short on Initial Load, simply use the following code:

You can modify these settings according to your needs. Hope this Helps!

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

CcarabsJun 11, 2020

Thank you for the details. It is a very thorough response and will address my question for sure. Can you add this information to the Documentation for the header?

Though I love this design and will purchase it for many projects, requiring Javascript to control initial page design instead of defining it in classes is a bit disappointing. I feel like it is the same as using style tags on the elements. But those no longer even work since your JS will overwrite them. I would hope that in a future version you consider adding a compressed header design without requiring JS to keep it short upon scroll.

Thanks again.

SSemicolon WebSTAFFJun 11, 2020

Hello,

Thanks for your Patience and Suggestions! We are already in the Process of Adding a Lot of Documentations and they will be available online by Sunday this week.

And yes, we absolutely understand the need to just use CSS for the Initial Page Design and will introduce a feature to disable JS initialization for the Header Size by next week. Thank You so much for your suggestions on this.

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

CcarabsJun 11, 2020

Thank you again for your reply.

I plan to use this theme on a few sites I am developing. Even though I am a few weeks away before those projects go live I just purchased 2 more licenses on TF along with extended support. My profile here still says I only have 43 days remaining of support... how can I get that refreshed?

SSemicolon WebSTAFFJun 11, 2020

Hello,

Thank You so much for Purchasing more Licenses of Canvas! It is Really Appreciated! :)

The Licenses will be refreshed once you Logout and Login again to the Support Forums.

Hope this Helps!

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

CcarabsJun 11, 2020

Thank you... my licenses now show up.

SSemicolon WebSTAFFJun 11, 2020

Hello,

Glad this was resolved.

Do let us know if we can help with anything else.

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