[Support request] Can't control excessive Menu top padding in tablet view

Home Forums Support [Support request] Can't control excessive Menu top padding in tablet view

Home Forums Support Can't control excessive Menu top padding in tablet view

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #671438
    Norland

    Hello,

    I’ve tried a combination of tweaking the elements-header with customizer but to no avail. Although Beaver Builder doesn’t give me an accurate view of what happens when I visit site in tablet form, when I do use an actual tablet I see the problem. I am getting an inordinate amount of space between top menu and top margin.
    ScreenShot of Tablet View

    Please Help!

    #671519
    Leo
    Staff
    Customer Support

    Hi there,

    This is happening because the menu left and right menu padding you are using are quite large so it doesn’t have enough space when the screen gets below around 1020px.

    Two solutions for this:
    – Reduce the menu padding for tablet using the CSS below and fine tune the px number:

    @media (min-width: 769px) and (max-width: 1024px) {
        .main-navigation .main-nav ul li a {
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    – Increase the mobile header breakpoint to like 1050px with this CSS:
    https://gist.github.com/generatepress/c23aef2d05807c39bb32

    I would suggest the second solution.

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps 🙂

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