Canvas Support

Submenu display

4 replies · opened Oct 5, 2017

LleanovskiOct 5, 2017

hi

I have having trouble with page-submenu.html as supplied. I have 10 submenu items which display fine on a large computer screen.

As the screen size is gradually reduced, some of the menu items wrap to a second row without the submenu background color extending behind the second row. Result is the first row has background color but the second row gets lost in the page background color. Creating a second row of menu items is not a problem - the background behaviour is the problem.

As the screen is further reduced in size, the hamburger menu icon takes over and works fine on mobile sized screens.

See attached file which has the number of menu items I intend to use incorporated into your original file page-submenu.html.

SSemicolon WebSTAFFOct 6, 2017

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

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

LleanovskiOct 6, 2017

hi

It is difficult at the moment to give a live link. However the problem can be replicated by using the Canvas file 'page-submenu.html' - add some more items to the submenu and then change the screen size to see the effect. I had 10 items in the submenu when I tried it.

Hope this is a way you can observe the issue.

SSemicolon WebSTAFFOct 11, 2017

Hello,

Thanks for your Patience!

Unfortunately, there is a certain limit on the Number of Items you can have in a Menu since the Width available for the Menu is limited. You can consider decreasing the Font Size and Padding of the Menu Items to accommodate it into the available area. Please consider using the following CSS Code: 

#page-menu nav li a {
    margin: 8px 2px;
    padding: 0px 10px;
    font-size: 12px;
}

This will definitely work fine. Hope this Helps!

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

LleanovskiOct 13, 2017

that works fine - 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