Inconsistent menu on mobile devices

  • Andy Dickinson

    (@theangryduck)


    5 years ago

    Hi,

    When viewing our website on a mobile device it looks fine in portrait mode i.e. the menu is shown in hamburger form and the sidebar is shown below the main content.

    But when we switch to mobile landscape it behaves as a desktop/tablet i.e. the full menu is shown and it tries to fit sidebars alongside the content. This means the menu overlaps onto 2 lines which looks bad and the content is too squashed. In landscape view on a mobile we should still get the hamburger etc.

    Example page: https://www.hornchurchfc.com/news-events/league-news/

    Presumably the media breakpoint is defined within the CSS somewhere. What is the CSS that we would need to apply that changes the breakpoint for a mobile device?

    Thanks,
    Andy

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Roch

    (@rochesterj)

    5 years ago

    Hi Andy!

    Thanks for reaching out!

    Our media queries start on line 830 of the styles.css

    That first rule is probably what you need to change, from 600px to something a bit bigger (maybe around 780px).

    Thanks!

    Kind Regards,
    -Roch

    Thread Starter Andy Dickinson

    (@theangryduck)

    5 years ago

    Hi Roch,

    I assume you mean this bit of code …

    “@media screen and (max-width: 600px) {
    .main-navigation .nav-menu > li:hover > a,
    .main-navigation ul ul li.page_item_has_children:hover > a {
    color: #fff;
    background: transparent;
    }

    .main-navigation .nav-menu li a:hover {
    color: #fff;
    background: #00a69c;
    }

    .main-navigation ul ul {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.1);
    }

    .main-navigation ul ul a {
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    }

    .main-navigation .search-form .search-submit {
    color: #fff;
    background: #00a69c;
    }
    }”

    To me this looks like it’s just changing some colours but I updated it anyway and it didn’t make any difference. I changed the size to 3000px so I could see the effect on my desktop and it just changes the menu colours (I had to add !important for it to show). It doesn’t force the mobile (hamburger) menu.

    Thanks,
    Andy

    Thread Starter Andy Dickinson

    (@theangryduck)

    4 years, 12 months ago

    Any chance of a reply @rochesterj.

    Thanks,
    Andy

    Thread Starter Andy Dickinson

    (@theangryduck)

    4 years, 11 months ago

    Hey @rochesterj @savvasha @brianmiyaji

    Is Rookie not supported anymore? We’ve had no answers to this thread or to any of our pre-sales questions sent in on 1st, 8th and 14th of May.

    Andy

    Savvas

    (@savvasha)

    4 years, 11 months ago

    Hi @theangryduck ,

    Sorry for the late response. You should change the @media calls at two files (style.css and framework.css). What you can try is to change from:
    @media screen and (max-width: 600px) {
    to
    @media screen and (max-width: 780px) {
    and from
    @media screen and (min-width: 601px) {
    to
    @media screen and (min-width: 781px) {

    Ofcourse you should first create a child theme, and copy the css changes to the child-theme style.css so as to be update consistent 😉

    Thanks and sorry again for any inconvenience,
    Savvas

    Thread Starter Andy Dickinson

    (@theangryduck)

    4 years, 11 months ago

    Thanks @savvasha I’ll give this a go.

    Andy

    Roch

    (@rochesterj)

    4 years, 10 months ago

    That’s awesome, Andy!

    Let us know how it works for you.

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Inconsistent menu on mobile devices’ is closed to new replies.