Bug Report: Problem with navigation on some smaller resolutions

Darko's Avatar

Darko

22 Dec, 2021 09:41 PM

Product: Oneo Contao
Contao Version: 4.9.24
Browser and version: -

Hi,

I am preparing new site with Oneo theme, and some users with smaller screens have problem with navigation and mega menu. I tested it using 1024 px wide screen, and in that case, main navigation is placed in two lines, and user can't access to mega menu on the first navigation link.

It will be more clear on video in attachment.

Main logo is also shown in weird way.

Is this possible to fix, or I have to leave it as it is? Unfortunately, bug is found by client, therefore I want to investigate.

  1. Support Staff 1 Posted by RockSolid Theme... on 23 Dec, 2021 10:57 AM

    RockSolid Themes's Avatar

    Thank you for submitting your question!

    Adding the following CSS code to files/oneo/css/custom.css should fix this issue:

    @media screen and (max-width: 1680px) {
        .main-navigation > ul > li {
            margin-left: 1em;
        }
    }
    @media screen and (max-width: 1550px) {
        .main-navigation > ul > li {
            margin-left: 0;
        }
    }
    @media screen and (max-width: 1420px) {
        .main-navigation > ul > li {
            margin-left: -1em;
        }
    }
    @media screen and (max-width: 1300px) {
        .main-navigation > ul > li > a,
        .main-navigation > ul > li > strong,
        .main-navigation > ul > li > span {
            font-size: 0.7em;
            line-height: 2.8;
        }
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • navigation-problem_Trim.mp4 3.88 MB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac