WordPress.org

Forums

The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

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

  1. Vivek Hutheesing
    Member
    Posted 2 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: 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    Try adding:

    .site-header {
        padding-bottom:0;
    }
  8. Vivek Hutheesing
    Member
    Posted 2 years 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 2 years 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 2 years ago #

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

  11. Vivek Hutheesing
    Member
    Posted 2 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic