Support » Fixing WordPress » Menu background colour causing a large field in header in tablet and mobile view

  • Resolved boppar

    (@boppar)


    I have a problem with the logo and menu. On desktop it looks fine, but in tablet and mobile view there is a large rectangular blue field.

    Desktop:
    https://ibb.co/rdrHFj9
    Tablet:
    https://ibb.co/fdX394w
    Mobile:
    https://ibb.co/hK1Fmw1
    Site:
    https://ibb.co/VNbnNkX

    I think it’s the background colour of the navigation menu that’s causing the large field.

    I’ve tried these 2 CSS below. Bothe gives the background colour I want but both causes the rectangular field.
    .main-navigation {
    background: #5B9ADE;
    }

    nav#site-navigation, .main-navigation .menu > li {
    background: #5B9ADE;
    }

    How can I set a background color on the navigation menu without causing the field in tablet and mobile view?`

Viewing 3 replies - 1 through 3 (of 3 total)
  • lisa

    (@contentiskey)

    Which theme are you using?
    Display for various device sizes is dependent on the theme.

    Instead of:

    .main-navigation {
    background: #5B9ADE;
    }

    Use:

    @media (min-width: 768px) {
    .main-navigation {
    background: #5B9ADE;
    }}

    This means the background should only be applied for screens with sizes 768px or greater (the point above which your menu changes to the horizontal desktop menu).

    UPDATE:

    The above will remove the menu background completely on mobiles. If you want to have the background on the vertical menu when the hamburger icon is toggled, add this:

    .main-navigation.toggled {
    background: #5B9ADE;
    }
    Thread Starter boppar

    (@boppar)

    Thanks @gappiah

    It worked excellent. Thanks a lot!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.