Canvas Support

Between 1000 and 1400 width, Menu + "sub-title" goes very wierd.

16 replies · opened Apr 28, 2017

SStuAndrewsApr 28, 2017

Hi Folks,

Please look at http://www.sandersnoonan.com.au.

If you change the width of your browser, take a couple of goes, making it between 1000 and 1400 pixels, you should see what I mean. Attached is a screenshot of the effect.

Basically the content gets pushed to the left, and the menu goes up into the top-right. Very strange. And very easy to replicate (on our customers pcs, who don't have super hires or super lowres screens. 1000 to 1400 definitely fall within their monitor res width.

Please have a look and let me know what's happening.

Thanks.

SStuAndrewsMay 1, 2017

Hi Folks, bump. Is super important.

SStuAndrewsMay 2, 2017

Bump again please.

SSemicolon WebSTAFFMay 3, 2017

Hello,

Thanks for your Patience! We have just checked out your Website and the issue is that since the Menu is Full Width, the Menu Size depends on the Browser/Screen Size and thus it resizes every time the Browser Resizes. And also you have Large Width Logo which shrinks the size of the Menu Area. You should consider shrinking the size of the Logo and also the Menu Padding in order to fit them both in the Header to fix this issue.

To shrink the Logo, you can use the following CSS Code: 

.device-md #logo img {
    height: 80px;
    margin: 10px 0;
}

and to shrink the padding of the Menu Items, use the following CSS Code: 

.device-md #primary-menu.sub-title > ul > li > a {
	padding-left: 14px;
	padding-right: 14px;
}

.device-md #primary-menu ul li > a { letter-spacing: 0; }

You should use both the CSS Codes. Also, it is recommended to add the following HTML Code after the </header> Tag:

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.help you with anything else or if you find any further issues.

SStuAndrewsMay 4, 2017

Hi There,

Thanks for the update.

However, it doesn't solve the issue. I've put into place what you suggested, and the issue is still there (granted, a little different, but still very visibly broken).

http://www.sandersnoonan.com.au/

Please let me know what else I can do.

Thanks.

RrksampleMay 6, 2017

Hi,

I have the same issue with the Logo and Primary menu. This is especially frustrating while working from a laptop.

Can you please reply with a working solution?

Thanks,
Ravi.

SSemicolon WebSTAFFMay 8, 2017

Hello,

We have checked out your Codes again and your css/custom.css File has some Primary Menu related CSS Codes which is interfering with the codes we have provided. Please delete the Primary Menu related codes and then add the following code at the bottom of the css/custom.css File: 

@media (min-width: 992px) {
	#logo img {
		height: 80px;
		margin: 10px 0;
	}

	#primary-menu.sub-title > ul > li > a {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
	}

	#primary-menu ul li > a { letter-spacing: 0; }
}

@media (min-width: 1200px) {
	#primary-menu.sub-title > ul > li > a {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}
}

This should definitely fix your issue. Hope this Helps!

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

SStuAndrewsMay 9, 2017

Hi Folks,

Please check again. I was having issues with dev / live and the custom.css file not being correctly overwritten when moving to live.

Issue still occurring.

Please investigate.

SSemicolon WebSTAFFMay 10, 2017

Hello,

We have checked out your Website and we still do not find the CSS Codes we have provided you with in the css/custom.css File: http://www.sandersnoonan.com.au/beauty2/css/custom.css . Please update with the Latest Codes and remove any related CSS codes from this files.

Additionally, the position of the css/custom.css File in the Document <head> is also not in compliance with what is explained in the Documentation.

Please fix these and your issues will be automatically solved. Hope this Helps!

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

SStuAndrewsMay 12, 2017

Hi Folks,

Thanks for your patience. I missed your second css updates post.

Have got it all in, and the issue is still happening.

http://www.sandersnoonan.com.au/

Should I be keeping your first set of css updates?

SSemicolon WebSTAFFMay 15, 2017

Hello,

We have just checked out your Website and the css/custom.css File still has the Old CSS Codes. The changes will not take place and the issues will not be resolved if you do not paste the following code at the bottom of the css/custom.css File: 

@media (min-width: 992px) {
	#logo img {
		height: 80px;
		margin: 10px 0;
	}

	#primary-menu.sub-title > ul > li > a {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
	}

	#primary-menu ul li > a { letter-spacing: 0; }
}

@media (min-width: 1200px) {
	#primary-menu.sub-title > ul > li > a {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}
}

and remove any other Old #primary-menu and #logo related codes from this file. It would be great if you can please recheck this file here: http://www.sandersnoonan.com.au/beauty2/css/custom.css after updating the codes via your FTP so that the changes take place properly.

Thanks for your Continuous Patience on this but the CSS Codes we had provided you with in the earlier replies needs to be updated in your css/custom.css File so that the issues can be fixed.

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

SStuAndrewsMay 18, 2017

That's what I asked you in my last post, should I remove the first set of css you asked me.

SStuAndrewsMay 18, 2017

I've removed your previous code and kept only the code that you mention in your last post above.

Unfortunately the problem still persists, although now it's only at a smaller width of the browser.

http://www.sandersnoonan.com.au

NOTE: The custom.css file still contains old css, but it's wrapped in /* comments */.

SStuAndrewsMay 22, 2017

Hi Folks,

Any word on this?

Can you please un-tick this from being complete/fixed - It's not.

Thanks.

SSemicolon WebSTAFFMay 23, 2017

Hello,

Please add the following code after the codes you have already added in the css/custom.css File: 

@media (min-width: 992px) and (max-width: 1111px) {
	#logo img {
		height: 50px;
		margin: 25px 0;
	}

	#primary-menu.sub-title > ul > li > a {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 11px;
	}
}

We would like to re-iterate again that this is not an issue since this completely depends on the Amount of Menu Items you have in the Header and also your Logo Size. So you will need to adjust the logo sizes and menu items accordingly in specific media queries. Meanwhile, the codes above should fix the issue.

Hope this Helps!

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

SStuAndrewsMay 23, 2017

Thank you for that, the issue is resolved.

It definitely is an issue from a customers point of view. Being a dev I get that you think it's not an issue because of technical limitations, but from my customer-end perspective, it's an issue.

Maybe the docs need to be updated if they haven't been already. Help us to understand any limitations with the number of items on the menu. Maybe add a "Menu" main item in the docs, that might help.

SSemicolon WebSTAFFMay 31, 2017

Hello,

We totally understand your view! However, this works in the same way as you would use it for a Fixed Width Header. Suppose, if you have a Container of 500px, you would never add an Image of 600px which goes outside the viewport! This is the same way this works. We will definitely add more Documentation regarding this in Our Next Update so that the process of fixing this issue is much faster! :)

We Really Really Appreciate your Kind Patience regarding this!

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