Social Links On Top of the Header

  • Unknown's avatar
    acswilde · Member ·

    It worked with the twitter icon but not with the Facebook one : (

    .facebook-icon img {
    visibility: hidden;
}
. facebook-icon {
    background: url("https://cswilde.files.wordpress.com/2016/01/facebook.png") no-repeat scroll center bottom / 26px auto;
    padding-top: 20px !important;
    display: block;
}
. facebook-icon a {
    display: inline-block;
}

    Also, I noticed that depending on the size of the window, the buttons change position. Is there a way to fix them so that no matter the size of the window they keep the same position?

  • Unknown's avatar
    thesacredpath · Member ·

    In the code you pasted here, there are spaces in front of a couple of the CSS selectors, there is a space between the period and the facebook-icon, which causes the CSS to break. I pasted the following directly into your customizer and it worked. 

    .facebook-icon img {
visibility: hidden;
}
.facebook-icon {
background: url("https://cswilde.files.wordpress.com/2016/01/facebook.png") no-repeat scroll center bottom / 26px auto;
padding-top: 20px !important;
display: block;
}
.facebook-icon a {
display: inline-block;
}

    Due to the way the Responsive theme HTML is structured, there is no way to fix the position of the relocated widget. This is one of the things you run into when trying move a widget up into the header area on responsive designed themes. Using position: absolute, the element loses its relationship with the other page elements and virtually floats free. If the footer div was within the overall container div, then we would have more control, but it is at the same level.

    You could construct a number of Media Queries to set the position of the widget at various window widths.

  • Unknown's avatar
    acswilde · Member ·

    Oh I see. I cannot thank you enough for your help!

    Oh, is there a way to make them fixed on the top of the page instead of the bottom? The standard with the responsive theme was at the bottom, maybe we can make them fix on top instead?

  • Unknown's avatar
    thesacredpath · Member ·

    Give the following a try, which moves the social icons to the top and center aligns them. It seems to work well on all screen/window sizes, but make sure and check in a tablet and phone just to make sure. 

    .grid.col-380 {
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 40px;
    width: 100%;
}
#footer .social-icons {
    text-align: center;
}
  • Unknown's avatar
    acswilde · Member ·

    Oh no it’s right on top of the header image, not above :(
    How do I fix that?

  • Unknown's avatar
    thesacredpath · Member ·

    In this rule, change the “top” value to 50px
    .grid.col-380
    and then add this, which spaces the container down to make room for the social icons. Make sure and view your site both logged in and logged out, and view things on a tablet and phone to make sure the spacing is ok. 

    #container {
    margin-top: 50px;
}
  • Unknown's avatar
    acswilde · Member ·

    Nah didn’t look that great, so I ended up leaving them at the bottom…

    Thank you so much for all your help Sacredpath, you’re like a Jedi of CSS ^_^

  • Unknown's avatar
    thesacredpath · Member ·

    Heh, thanks for the compliment. Fitting given I just watchec the new Star Wars movie a couple weeks ago. :)

    Let us know if you have any further questions or problems.

1 2
  • The topic ‘Social Links On Top of the Header’ is closed to new replies.