Canvas Support

mega menu, pagination and css

1 reply · opened Feb 26, 2021

TTalieJackFeb 26, 2021

i promise these questions are all related!

  1. in mobile, the mega menu shows an arrow to drop down to show the contents of the BROODMARE BAND page, but does not display the items in the list. it's a giant list -- if the items cannot be shown, is there an option to hide the drop-arrow and sub-nav contents in mobile?

2a) what have i done wrong with pagination? it does in fact limit the number of items shown, but now the actual pagination links aren't showing up.

2b) where can i find the css for pagination? when i was able to get it to show up, it was yellow text (default link) but the "current page" had a turqoise (the original theme colour) outline? i'd like it to match the pagination from https://have-dog.com/clients/ouranch/mares-list.html (but also centered) and i'm not sure where to find/what is the css to copy into custom.css so i can edit it.

2c) is it possible to use anchors to link to the individual pagination "pages" from the main nav? if not, how does one link to the individual "articles"?

any help you can provide would be greatly appreciated!

SSemicolon WebSTAFFMar 1, 2021

Hello,

Apologies for the Delays in replying to your support query and the Inconveniences caused!

  1. This error is due to incorrect CSS in your css/custom.css File:
    [ch_pre type="css"].mega-menu-content {
    position: absolute;
    visibility: hidden;
    width: 220px;
    background-color: #FFF;
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEE;
    border-top: 2px solid #ff9900;
    z-index: 399;
    top: 100%;
    left: 0;
    padding: 0;
    }[/ch_pre]

Make sure that when you are Customizing CSS Codes, you are also properly copying the Media Queries to avoid issues on different devices. The above codes should be places inside the @media (min-width: 992px) Media Query and this should fix the issue on Mobile Devices.

2a. When using the jPagination Plugin, make sure that you have added this Plugin at the bottom of the Page after the js/plugins.min.js File (see attached image):
[ch_pre][/ch_pre]

2b. You can find the Pagination Colors in the css/colors.css File with the references of .page-item and .page-link Classes. To center the Paginations, simply add the .justify-content-center Class to the .pagination Element.

2c. Unfortunately, this is not supported. You will need to hardcode the Article/Pagination Links in the href Attribute value of the Menu items.

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