WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Reduce vertical spacing betw Header Links and Body Content (11 posts)

  1. Vivek Hutheesing
    Member
    Posted 5 months 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: http://blog.rblock.com/

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

    Thanks,

    Vivek

  2. Nhat
    Member
    Posted 5 months ago #

    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

  3. esmi
    Forum Moderator
    Posted 5 months ago #

    @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.

  4. Vivek Hutheesing
    Member
    Posted 5 months ago #

    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

  5. Vivek Hutheesing
    Member
    Posted 5 months ago #

    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

  6. Nhat
    Member
    Posted 5 months ago #

    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.

  7. esmi
    Forum Moderator
    Posted 5 months ago #

    Try adding:

    .site-header {
        padding-bottom:0;
    }
  8. Vivek Hutheesing
    Member
    Posted 5 months ago #

    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

  9. Nhat
    Member
    Posted 5 months ago #

    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");
  10. esmi
    Forum Moderator
    Posted 5 months ago #

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

  11. Vivek Hutheesing
    Member
    Posted 5 months ago #

    @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.

Reply

You must log in to post.

About this Topic