Looking to add Follow Buttons to Visual Theme Header

• 

  samsdisneydiary · Member · Dec 1, 2014 at 6:19 am

  • Copy link
  • Add topic to favorites

  Would like to add Follow Buttons (i.e. Facebook, Youtube, Instagram, twitter, RSS) in the header.

  Can that be done with Custom CSS, where do I start???? Almost like I want a widget for the site?

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

• 

  thesacredpath · Member · Dec 1, 2014 at 7:49 pm

  • Copy link

  Given that Visual doesn’t have a overall parent div that all the other page elements are within, this is quite tricky to accomplish and have it work well with all screen sizes (desktop down to phone).

  Generally in these cases, I would suggest adding the follow buttons to the menu, but there isn’t a lot of width available to add them given the title and tagline/site description are in the same area as the menu.

  We could move the site title/tagline up and overlay it on the header image. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to see how that would look. That would open up more space for us to add the social icons to the menu. See what you think and let us know.

  .site-header .section {
      position: relative;
  }
  .site-branding {
      position: absolute;
      top: 10px;
      background: rgba(0, 0, 0, 0.5;
      padding: 10px;
      padding-top: 10px;
  }