Gap between Header and Main Menu on mobile only

  • Resolved drarthias

    (@drarthias)


    7 years, 8 months ago

    I’m almost finished with the theme customization for my site, except for one little detail which I can’t seem to fix. This is driving me crazy. I am using the Vantage theme from SiteOrigin, and I feel like I have checked the padding and margins on every possible related element.

    Here is my site: penandtongue.com

    Everything looks fine in full screen, but when you shrink the window down, or view it on mobile, a large gap of empty space suddenly appears between the header logo and the main menu navigation bar.

    I changed the padding from Theme Design > General > Header Padding to 0 (I think the default was 45px), and I also went into the Custom CSS plugin to inspect all of the surrounding elements, and I can’t find it. I’ve tried putting 0 padding in all kinds of places, and nothing seems to change it.

    Help would be greatly appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)
  • CrouchingBruin

    (@crouchingbruin)

    7 years, 8 months ago

    There’s an element called support-text under the logo that doesn’t appear to have any content, but is taking up space at mobile widths. Add this rule to your custom CSS:

    body.responsive #masthead .hgroup .support-text {
  display: none;
}

    Thread Starter drarthias

    (@drarthias)

    7 years, 8 months ago

    Perfect! Thank you so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gap between Header and Main Menu on mobile only’ is closed to new replies.