How do I remove the Space between the main Content and Menu

  • Author
  • #96781

    I tried the solution that was given on another closed post but it did not work

    Add this line to the CSS in the custom css box of the Miscellaneous section of the Tempera settings
    body #forbottom { margin-top: 0; }

    I have two sites using Tempera and I was Able to do it, with the other but cannot remember how


    Cryout Creations Team

    That space depends on what’s actually displayed on your site’s section.
    On the homepage you’re missing the page title (which would normally have gone right after the menu) and are seeing some additional space created by the normal paddings and margins of the following elements (which are normally landing page sections – I’m not sure how you got them displayed inside a page, did you copy/paste the HTML manually?).
    To remove those you’ll need to resort to some custom CSS:

    .home .entry-content, #front-text3, #front-text3 h3 {
        margin-top: 0;
        padding-top: 0;

    The other site sections are displayed normally, with the title being the first element and right at the top of the page.

    If you like our creations, help us share by rating them on
    Please read the available documentation and search the forums before posting.

    I want to know this, too – and Zed’s answer above doesn’t really address a bog-standard installation (he’s addressing craigmn3’s non-standard site)

    So in the Tempera demo, for example, which bit of CSS creates the 20px (approx) black space between the nav bar and the main content (slider)?

    It’s got to be in the stylesheet somewhere?… but I’m not enough of a detective to find it in 3000 lines of code! However, I’m pretty sure it will be an element with a class or ID because it’s possible to change the colour of this space through the Tempera Settings/color section (all the heading colours are bizarrely grouped under ‘General’ in the settings – why didn’t they name it ‘Heading’?…!!)



    ** SOLVED **

    Add this to your additional css in the customiser:

    #main {margin-top:0px;}

    You can vary the pixel gap – 0px for flush with bottom of the slider, 3px, 5px etc. whatever you prefer.

    I couldn’t find this in the style sheet, but when I looked at the page source code I saw the <div id="main" class="main"> and then using the browser inspector I found the css tag for the ‘main’ ID.

Viewing 4 posts - 1 through 4 (of 4 total)

You need to log in to reply to this topic.