Issue with Responsive Menu ~ Canvas HTML

5 replies · opened Sep 1, 2017

KkpirnieSep 1, 2017

Can you help me out here.
Issue is, the menu does not seem to pushing the content down far enough on small screens, and looks like this: http://prntscr.com/gfw74g

Can you have a quick look and let me know what tweaks I would need to make in order to fix it?

the site is https://getme.onl

KkpirnieSep 1, 2017

I have also had a report that the logo disappears in Safari on a MacBook at 256x1600 resolution.

I have no been able to replicate the issue tho, but I can see that it does disappear on my iPhone 5S

KkpirnieSep 1, 2017

Never mind about the issue with the logo. I found it, and what needs to be done is a secondary with a "retina-logo" class needs to go under the existing logo.

I am pushing back on my client to get me a good enough logo for that, and will leave it out until they get it to me :)

Nav issue remains though, and I haven't been able to figure it out.

SSemicolon WebSTAFFSep 5, 2017

Hello,

We have gone through your Website and the Codes. The issue is not with the Default Codes but with the Custom CSS Codes you have added in the custom.css File:

  1. Resize the Header Height using the CSS Generator here: http://support.semicolonweb.com/header-height-css-generator/ .

  2. Use the following code(if you need to) inside a Media Query:

#header.transparent-header + #google-map, #header.transparent-header + #page-title.page-title-parallax, #header.transparent-header + #slider, #slider + #header.transparent-header {top:-115px !important;}
  1. The min-height: 90px; CSS Property added to the #primary-menu in the css/responsive.css File is causing an issue. Please consider checking this out.

Hope this Helps!

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

KkpirnieSep 6, 2017

I thought it may have been with that, but I also noticed playing with the z-index on "static-sticky transparent-header semi-transparent dark" with a bit of javascript seems to have fixed it as well.

I ended up adding:

jQuery("#primary-menu-trigger").on('click', function () {
		setTimeout(function() {
			if ( jQuery('body').hasClass('primary-menu-open') ){
				jQuery('#header.transparent-header, #header.semi-transparent').css('z-index', '2');
			} else {
				jQuery('#header.transparent-header, #header.semi-transparent').css('z-index', 'auto');
			}
		}, 1);
	} );

Which does the trick :)

SSemicolon WebSTAFFSep 7, 2017

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