On smaller screens, content overlaps left menu

  • Hello,

    My website is coming along nicely, but recently I ran into the following issue. I have a menu on the left (#secondary) that is in my child CSS as:
    ‘#secondary {
    clear: both;
    display: block;
    padding: 0px 0;
    position: fixed;
    top: 130px;
    font-family: Baskerville, “Playfair Display”, “Times New Roman”, serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 100;
    }
    ‘
    This looks nice on normal sized screens or big ones, but on smaller screens (e.g. smartphones), it results in the possibility that users can scroll the content over the menu. Does anyone have an idea how I can fix the content of the website in a way so that it won’t overlap the menu when scrolling on a small(er) device?

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link to the webpage with the issue?

    Thread Starter ShaiRoelud

    (@shairoelud)

    Sure, it’s this website.

    All my pages except the homepage have a menu on the left hand size. When you make your browser small (or when your screen is small) you’re able to scroll the contents of a page over the menu, which isn’t really what I would like to to have happen.

    What I basically want is that visitors can scroll vertically, but not horizontally. I’ve tried to figure it out, but the only thing I could find is that this would require a javascript file.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘On smaller screens, content overlaps left menu’ is closed to new replies.