Canvas Support

Responsive Menu Problem

5 replies · opened Apr 13, 2018

SsonatainkemiApr 13, 2018

Hello,
I have a problem about the responsive menu:
-With width 1920px: all is perferct
-with width between 996px and 1317px: the menu doesn't fit
-with width under 996px: all is perfect

How can i resolve this menu problem ?

Thank you very much for your work

I had a screenshot for illustrate the problem

SSemicolon WebSTAFFApr 17, 2018

Hello,

The issue with this is that the Width of the Menu Items is larger than the available area on the Header. Simply use the following CSS Code to decrease the padding between the Menu Items so that the Menu can fit: 

.device-lg #primary-menu ul li > a {
	padding-left: 12px;
	padding-right: 12px;
}

This should definitely work fine. You can change the value according to what suits you best. Hope this Helps!

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

SsonatainkemiApr 19, 2018

Hello,
Thank you for your answer :)
For resolve the problem, i change the padding and police font (more condensed) to be sure to have a correct menu for any laptop.

Now rest a problem for TABLET, the menu is too long:

I add some property into responsive.css

@media (min-width: 992px) and (max-width: 1199px)
#primary-menu ul li > a {
	display: block;
	line-height: 22px;
	padding: 39px 5px;
	font-size: 12px;

	}

But the menu rest too long
But i see that the menu is correct when i scroll down a little.
Is it possible to fix the menu like the screenshot but just for media width between 992 and 1199px ?

Thank you

SsonatainkemiApr 23, 2018

any solution ?

SsonatainkemiApr 27, 2018

Now rest a problem for TABLET, the menu is too long:

I add some property into responsive.css


@media (min-width: 992px) and (max-width: 1199px)
#primary-menu ul li > a {
    display: block;
    line-height: 22px;
    padding: 39px 5px;
    font-size: 12px;
 
    }

But the menu rest too long
But i see that the menu is correct when i scroll down a little.
Is it possible to fix the menu like the screenshot but just for media width between 992 and 1199px ?

Thank you

SSemicolon WebSTAFFMay 2, 2018

Hello,

Simply consider using the following CSS code: 

.device-lg #logo img {
	height: 60px;
	margin-top: 20px;
	margin-bottom: 20px;
}

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.

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