Canvas Support

Canvas 6.1.3 - Writer Template - Header & Menu issues

10 replies · opened Nov 21, 2020

SstookyNov 21, 2020

hey folks @semicolon

long time no hear/write ... hope you all are healthy and covid-19 did neither harm you personally or your family, friends and beloved ones, nor does it have a too big impact on your business ?!

new project and once more I would like to make use of your awesome canvas template.
of cause I bought a complete new license and not only new support-extension, every project gets his propper license with me ;-)

ok ... the url of the dev environment is enclosed and I do have 3 questions regarding the header and menu based on the "Writer Template"

N°1:

I have as in original template a logo, that is simply the name of the author/writer
It is higher than the original as it has 2 lines.
I simply added some padding to the #logo and it works well for desktop so far.
when scrolling the #header gets semi transparent and sticky, cool ... customer likes it.
what I would like to do is when scrolling and the header gets semi-transparent exchange the image/logo to a single line logo.

the two line logo (Gerhard Johannes Dreßen) should become a single line logo with slightly smaller font size (G.J. Dreßsen).

please see attached image 1

N°2:

the moment I change to responsive smaller devices where the mobile-menu (3 horizontal lines) appears, I would like as well use the smaller single-line logo with "G.J. Dreßen" to decrease the height of the header in total

a.t.m. the logo on mobile-menu header seems as well to disturb the position of the mobile-menu icon

please see attached image 2

N°3:

I older versions of canvas, the dropdown menu of items on the far right where dropping down to the left insted to the right, otherwise they are cut and limited due to browser screen size

please see attached image 3

would be great if you had some solutions for me
stay tuned ad keep healthy
rgds

GUIDO

SstookyNov 22, 2020

... and sorry to be a pest, I do have a 4th question please

as you can see on the desktop version, above the menu on the right side, there is a language switch (DE | EN)
that should be of cause show up in the mobile menu as well please

mobile menu should be

left the single line logo (G.J.Dreßen) on the right the menu toggle icon and somewhere nearby the toggle icon the language switch too

thx and rgds
guido

SstookyNov 22, 2020

... by the way, If ya need a single line logo to test and play around
I ave meanwhlie recieved the font and created a logo_1l.png in the same path where logo.png is stored
where logo_1l reflects the single line version and logo the double line version

rgds
guido

SstookyNov 22, 2020

ok, I am happy so far with the 2 line logo and was able to shrink it when sticky, so thats fine

but I do have a complete mess the moment it comes to mobile versions
there I would preferr the single line logo and appreciate if ya have a fix for the language switch

I have so far made all changes ONLY in custom.css

rgds
guido

SSemicolon WebSTAFFNov 22, 2020

Hello,

Thanks so much for your Valuable Patience!

We are good here. Thanks for asking and we hope you and your family are healthy as well. Thank You so much for your Continuous Support and for Purchasing Another License. We really appreciate it and are grateful for the same. :)

Regarding your issues:

  1. You can consider using an Alternate Logo (1 Line Logo as you mentioned) for this. And then use the data-sticky-logo Attribute. Consider using this Code Example:
<div id="logo">
	<a href="index.html" class="standard-logo" data-sticky-logo="/fileadmin/framework/images/logo_1l.png" data-mobile-logo="/fileadmin/framework/images/logo_1l.png"><img src="/fileadmin/framework/images/logo.png" alt="Canvas Logo"></a>
	<a href="index.html" class="retina-logo" data-sticky-logo="/fileadmin/framework/images/logo_1l.png" data-mobile-logo="/fileadmin/framework/images/logo_1l.png"><img src="/fileadmin/framework/images/logo.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->

You can use this to define an Alternate Logo for Sticky and also for Mobile Devices. You can check a Live Preview for this here: http://themes.semicolonweb.com/html/canvas/logo-changer.html .

  1. Please use the Code as mentioned above. We have checked out the Menu Trigger position and it appears to be working fine for us and is on the right.

  2. We are looking into this and allow us some time to provide you with a solution for this while we run some tests on this.

  3. This is Definitely Possible! Consider using the following HTML code to add a Custom Language Switcher:

<div class="header-row justify-content-lg-between">

	<!-- Logo
	============================================= -->
	<div id="logo" class="col-auto mr-lg-0 order-lg-2">
		<a href="demo-writer.html" class="standard-logo"><img src="demos/writer/images/logo.png" alt="Canvas Logo"></a>
		<a href="demo-writer.html" class="retina-logo"><img src="demos/writer/images/logo@2x.png" alt="Canvas Logo"></a>
	</div><!-- #logo end -->

	<div class="header-misc">
		<div id="langSwitch">
			<span>
				<a href="/home.html" hreflang="de_DE" title="Deutsch" class="link-language link-active">DE</a>
			</span>
			<span>
				<a href="/en/home.html" hreflang="en-US" title="English" class="link-language">EN</a>
			</span>
		</div>
	</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
	============================================= -->
	...
	<!-- #primary-menu end -->

</div>

And now use this CSS Code to style the Language Switcher according to your needs in Desktop Devices only:

@media (min-width: 992px) {

	.header-misc {
		position: absolute;
		....
	}

}

As in Mobile Devices, this will work seamlessly.

Hope this Helps!

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

SstookyNov 23, 2020

hey folks

awesome support as usual ... thx a lot.

ok, so N°3 ist still under investigation by you guys, no problem, just a minor glitch.
I thought it was working in Canvas V5.x but sorry my fault it wasn't
in 5.x I used a different menu and what I had in my mind is that the third level flying out to the right would automaticalls fly out to the left if ther was not enough space.

would be great if you find a solution.
if it was just for me, no problem, but you know customers ... the can be very picky and find every little thingy just to have someting to insist on.

I am again putting your template into the WCMS Typo3 and Fliud templateing engine, and with the documentation and your excellent support, it is always a pleasure to code Typo3 + CANVAS.

rgds
Guido

... oh, one more little thingy that I have in mind since years.
all files are well named and structured into folders and subfolders, perfect.

only the main style.css is in located in the root, and not in /css where all the other major css-files live.
is there a reason for that?

If there is a relation to e.g. images or fonts in style.css I alwys have to correct the path manually, as with my projet structure css files ALL live in the /css folder ;-)

SSemicolon WebSTAFFNov 23, 2020

Hello,

Very Happy to Help! :)

Yes, we checked this out and this feature does exist in Canvas 5.x. But this is actually a Bug with the Writer Niche Demo's CSS Codes. We really apologize for overlooking this. Please consider using this CSS code:

@media (min-width: 992px) {
	.sub-menu-container.menu-pos-invert:not(.mega-menu-column) {
		left: auto;
		right: -20px;
	}
}

This will definitely fix the issue.

We can't Thank You enough for the Kind Words! We are very thrilled to know that Canvas is useful for you and we strive to make it more functional and feature-rich with future updates. If you have any suggestions, we will be more than happy to include them.

The style.css File has been named according to the WordPress File Structure which is why they have been added to the root Folder.

Hope this Helps!

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

SstookyNov 23, 2020

hello seicolon team

I thank you for the code, and if it works fine, if not (which I doubt ;-) ) I will come back
so this topic is closed.

thx ever so much für sour awesome support !!!

re styes CSS:
haha wordpress ... now it makes sense
I bet there are loads more users on wordpress than on e.g. TYPO3 or other CMS.

rgds
guido

SSemicolon WebSTAFFNov 23, 2020

Hello,

Very Happy to Help! :)

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

Stay Safe and Healthy.

SstookyNov 23, 2020

@media (min-width: 992px) {
.sub-menu-container.menu-pos-invert:not(.mega-menu-column) {
left: auto;
right: -20px;
}
}

code workz as expected

thx and always again thx
not only the best support in the universe, as well the fastest and reliable

topic solved & closed

rgds
GUIDO

SSemicolon WebSTAFFNov 23, 2020

Hello,

Thank You so much for the Kindest Words ever! :) Glad the issues were resolved!

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