Adding Space above header image

  • Unknown's avatar
    gocreativeindia · Member ·

    Hi,

    Kindly help me to add some space above the header image.

    Ajit

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @gocreativeindia!

    If you want a simple, blank stripe across the top, above the header image, this should work:

    #page {
    margin-top: 50px;
}

    Also, it looks like you have some non-CSS code saved under My Site > Customize > CSS, which is probably going to get in the way and prevent some of your actual CSS from working properly :)

  • Unknown's avatar
    gocreativeindia · Member ·

    Hi Chad1008,

    Thank you very much for the help. It would be great if you can help me to add a new social links menu on the top space.

  • staff-loquaciousloon · Staff ·

    You’re welcome!

    CSS can’t create a social links menu for you, but we may be able to put one somewhere else and then move it to the top.

    Try adding a Social Media Icons Widget widget to your sidebar. Make sure it doesn’t have a title (that would just get in the way).

    Then you can try to use some CSS like this (just an example):

    #wpcom_social_media_icons_widget-5 {
    position: absolute;
    top: 12px;
    right: 20px;
}

.widget a.genericon {
    padding-left: 7px;
    font-size: 24px;
}

    Now, that uses the widget’s specific ID (wpcom_social_media_icons_widget-5) – so it may need to be changed to target the right widget. If it doesn’t work on it’s own, try using your browser tools to find the ID of the widget in the code, or post back here and I’ll see what you have so far :)

  • Unknown's avatar
    gocreativeindia · Member ·

    Hi,

    That worked very well, But color of the social link icons is very same as green. How to change the color of these icons & add space between them.

  • staff-loquaciousloon · Staff ·

    Give this a try!

    #wpcom_social_media_icons_widget-5 {
    position: absolute;
    top: 12px;
    left: 12px;
}

#wpcom_social_media_icons_widget-5,
#wpcom_social_media_icons_widget-5 ul li {
    border: none;
}

.widget a.genericon {
    padding-left: 12px;
    font-size: 24px;
    color: #00006b;
}

    – You can increase the padding-left number for more space.
    – You can replace the color with a different HTML color code as needed

    I also added a style in there to eliminate a couple of border lines that were following the widget :)

  • The topic ‘Adding Space above header image’ is closed to new replies.