Support » Theme: Apostrophe » Apostrophe 2 showing two menus on mobile

  • Resolved hablemosdedoramas

    (@hablemosdedoramas)


    For some reason, the mobile menu in my website (hablemosdedoramas.com) shows both the hamburger menu and all the text links at the same time (the hamburger menu shows at about 768px in width).

    I tried hiding the text links with CSS, but then the mobile menu wouldn’t open when clicked because it uses those links as well.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @hablemosdedoramas,

    That effect is being caused by the following custom CSS on your site:

    .main-navigation ul {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        justify-content: space-between;
    }

    By default, the main menu is completely hidden on devices that 767px in width or smaller and replaced by a special mobile menu. The above custom CSS is forcing the main menu to display across all devices, which is why you’re seeing the double menu effect on mobile.

    You can wrap a Media Query around the above snippet so that it only applies to devices that are 767px in width or larger:

    @media (min-width: 767px) {
        .main-navigation ul {
            display: flex;
            flex-direction:row; 
            flex-grow:1;
            justify-content:space-between;
        }
    }

    Let me know if the above helps out or if you have any further questions.

    Siobhan, it’s perfect, thank you! I did the changes so quickly I overlooked that small detail >_<

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Apostrophe 2 showing two menus on mobile’ is closed to new replies.