Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 31, 2021 at 11:17 pm #1319244
    tremblayly

    Hi
    On my website here: https://silviafindings.com I have a problem where the main navigation wraps to two lines on smaller screen displays.
    I’ve been fixing this issue with individual CSS code but there should be a more global CSS change I can apply. I can’t seem to find a solution and would need your help.
    Examples of CSS I’ve used so far:
    On homepage I’ve used “huge padding” to quickly fix this issue.
    For the shop and blog pages, so far I’ve use the following CSS in general styling
    .single-product, .template-shop {
    padding-top: 90px;
    }
    #top #main .sidebar {
    margin-top: 50px;
    }
    .post {
    padding-top: 50px;
    }

    Much appreciated if you can help me find a better global solution I could apply.
    Thanks
    Lyse

    September 2, 2021 at 12:34 pm #1319493
    Rikard

    Hey tremblayly,

    It’s wraps to two lines at 1790 pixels on my end, I’m not sure if I would call that a small screen size. What exactly are you looking to change?

    Best regards,
    Rikard

    September 2, 2021 at 3:08 pm #1319529
    tremblayly

    Hi Rikard,

    I’m trying to fix this kind of behaviour when my display is not a wide screen: https://snipboard.io/wj6L2N.jpg

    On the homepage, if I remove the “huge padding” in the first section of the page, the same happens where the menu gets wrapped into two lines and hides the top of the page.

    Hope the screenshot will help show the issue I’m having on small screens.

    Thank you
    Lyes

    September 7, 2021 at 1:30 pm #1319976
    Yigit

    Hi Lyse,

    Thanks for contacting us!

    I checked your website and it seems like you have solved the issue by adding top padding to your content. A possible solution would be to decrease main menu font size on certain screens however secondary line starts at 1792px and with that many menu items, I am afraid that would not be good solution.

    Is there anything you are unhappy with your current solution? If so, we could try finding a solution to that instead :)

    Best regards,
    Yigit

    September 7, 2021 at 5:38 pm #1320001
    tremblayly

    Hi Yigit

    I don’t want to have to keep adding specific CSS each time a page has this gap issue. I still would like a global solution across the website do prevent any overlapping? Would changing the header height help do you think?

    Much appreciated
    Lyse

    September 7, 2021 at 5:53 pm #1320003
    tremblayly

    Hi Yigit

    I have reduced the main menu items and it helped.

    You can close this ticket.

    Thank you
    Lyse

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Main navigation wraps to second line causing header/body overlap’ is closed to new replies.