Need help? Check out our Support site, then


White space between header and menu

  1. buddhachicandbuttercream
    Member

    What CSS would I use to eliminate the huge white space between my header and menu items and shift everything up?

    The blog I need help with is buddhachicandbuttercream.com.

  2. First, you have created that space yourself (by using absolute positioning).
    Second, you shouldn't do this, because the theme is responsive: it shrinks to adapt to lower screen resolutions and mobile devices. When this happens, the header image becomes smaller, so the positioning of the menu will be all wrong. Drag the browser window to make it narrower and see for yourself.

  3. If you want the menu below the header image, the reasonable thing to do would be to use a theme that's designed that way. If you insist on repositioning the menu on the theme you're using, use a percentage instead of the px value.

  4. buddhachicandbuttercream
    Member

    Thanks justpi. I was provided with the CSS to create that space awhile back and I cannot recall what my issue was at that time. When you say "percentage" what would I use for that? Appreciate your help.

  5. You're welcome.

    You've added this:

    .main-navigation {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: -30px;
    position: absolute;
    top: 250px;
    width: 100%;
    }

    and this:

    .main-navigation {
    position: absolute;
    top: 500px;
    }

    Remove the second one, as it conflicts with the first, and turn the first one to this:

    .main-navigation {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 85%;
    width: 100%;
    }

    Change the 85 to adjust the space.

  6. buddhachicandbuttercream
    Member

    Excellent, thank you for your help! That worked perfectly.

Topic Closed

This topic has been closed to new replies.

About this Topic