On smaller screens, content overlaps left menu (3 posts)

  1. ShaiRoelud
    Posted 3 years ago #


    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?


  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    Can you link to the webpage with the issue?

  3. ShaiRoelud
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.