White space between header and menu

  • Author
    Posts
  • #1535779

    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.

    #1535880

    justpi
    Member

    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.

    #1535882

    justpi
    Member

    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.

    #1535911

    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.

    #1535914

    justpi
    Member

    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.

    #1535974

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

The topic ‘White space between header and menu’ is closed to new replies.