top bar - drop down menu problem

2 replies · opened Aug 31, 2019

RrdetwilerAug 31, 2019

Hi Canvas,

The top bar drop down menu looks great on desktop, but on mobile it drops down in such a way that half of it is offscreen.

Please let me know if there is a fix for this.

I've attached two screenshots so you can see what I mean.

Thanks

SSemicolon WebSTAFFSep 1, 2019

Hello,

Apologies about the Inconveniences caused!

This is Definitely a bug, so thanks for reporting this to us! We will release a fix for this in the upcoming update. Meanwhile, follow the steps to fix this:

  1. Find the following code in the css/responsive.css File:
.top-links ul div.top-link-section {
	left: auto;
	right: 0;
	padding: 20px 15px;
}

and replace it with:

.top-links ul div.top-link-section {
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 20px 15px;
}
  1. Add the following JS code at the bottom of your HTML Page just after the js/functions.js JS File Linking:

	jQuery(document).ready(function($){
		if( $('body').hasClass('device-md') || $('body').hasClass('device-sm') || $('body').hasClass('device-xs') ){
			$('.top-links li:has(.top-link-section)').css({ 'position':'inherit' });
		}
	});

This should definitely fix the issue. Hope this Helps!

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

RrdetwilerSep 1, 2019

Yes, that works perfectly.

Thanks!

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