Reduce vertical spacing betw Header Links and Body Content

  • Resolved Vivek Hutheesing

    (@vhutheesing)


    11 years ago

    Hi there,

    I’m using a Twenty Twelve child theme and would like to reduce the vertical spacing by half between my header links and body content. I currently have this CSS code in my style sheet, but want the vertical inch of spacing to more like half an inch:

    #site-navigation {
    position: fixed;
    top: 0;
    width: 960px;
    margin-top: 0;
    background: #fff;
    }

    My site is temporarily parked at: https://blog.rblock.com/

    I’m new to WordPress and CSS, and would be very grateful if anyone knows how to do this.

    Thanks,

    Vivek

Viewing 10 replies - 1 through 10 (of 10 total)
  • Nhat

    (@gotonhat)

    Hi vhutheesing,

    Do you mean something like this? If so, then this code should work:

    .site-header { 0px 0px 0px 0px; } /* the order of the values is TOP BOTTOM RIGHT LEFT */

    Please put that at the bottom of your theme’s style.css or child-theme’s style.css; or if you have WordPress’s official Jetpack plugin, you can put it in Appearance –> Edit CSS.

    You can control the spacing by changing the numbers. Again, the values represent TOP BOTTOM RIGHT LEFT. You can go negative if you have to.

    Hope this helps,
    Nhat

    esmi

    (@esmi)

    @nhat: will you please stop encouraging people to add or edit their main theme’s stylesheet. They need to use a child theme or a custom CSS plugin.

    Thread Starter Vivek Hutheesing

    (@vhutheesing)

    Hi Nhat,

    Thanks for your reply – your screenshot is exactly what I want to do. But when I tried copying your exact code into the bottom of my child-theme’s style.css file, it didn’t have any effect.

    Does the code start with a period like you show in your posting above?

    Best,

    Vivek

    Thread Starter Vivek Hutheesing

    (@vhutheesing)

    Thanks for that reminder Esmi, and for your generous help yesterday during which I learned some hard lessons. I followed Nhat’s suggestion in my child theme only, but it did not work. Vivek

    Nhat

    (@gotonhat)

    Does the code start with a period like you show in your posting above?

    It does start with a period.

    In CSS, a period (.) signifies a class.
    And a number sign (#) signifies an ID.

    esmi

    (@esmi)

    Try adding:

    .site-header {
    padding-bottom:0;
}
    Thread Starter Vivek Hutheesing

    (@vhutheesing)

    OK, any idea why your suggested code has no effect?

    I tried changing some of the values representing top bottom right left, but this had no effect either.

    Best,

    Vivek

    Nhat

    (@gotonhat)

    OK, any idea why your suggested code has no effect?

    It seems we have a small error in your child-theme set up. In your child theme, there’s this line:

    /* Import layout */
@import url(../twentytwelve/style.css);

    Try add quotation marks around the URL, like this:

    /* Import layout */
@import url("../twentytwelve/style.css");
    esmi

    (@esmi)

    I cannot see the CSS I suggested in your child’s stylesheet.

    Thread Starter Vivek Hutheesing

    (@vhutheesing)

    @esmi: it’s there now and it did the trick, thanks again.

    @nhat: I fixed the missing quotes, thanks, but only Esmi’s suggestion worked.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Reduce vertical spacing betw Header Links and Body Content’ is closed to new replies.