Adding a link to the header with css

• 

  lucbauer · Member · Oct 12, 2014 at 9:02 am

  • Copy link
  • Add topic to favorites

  Hi,

  I tried to search through the forums, without much luck, but is it possible to add a link to the site header (referring to the grey bar at the top of the blog)?
  I want to add a link aligned to the right linking back to our main site lucbauer.com

  Many thanks

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

• 

  hallluke · Member · Oct 12, 2014 at 9:18 am

  • Copy link

  Adding functionality is not possible with CSS, so adding a link cannot be done. However, repositioning a link would be possible, but tricky in your theme as the widget areas are hidden by default.

  It might be possible if you create a sticky post containing your link and then reposition it to the title area. If you want to try it out then publish a post containing your link, be sure to make it sticky so it’s always on the front page and then let me know when it’s live and I will take a look and see what can be done.

• 

  lucbauer · Member · Oct 12, 2014 at 9:26 am

  • Copy link

  Hi hallluke, thanks for the quick reply, I have created a sticky post with the link.

• 

  hallluke · Member · Oct 12, 2014 at 12:28 pm

  • Copy link

  OK, this gets a bit tricky but try adding this in to your CSS:

  #post-1277.sticky .entry-meta {
    display:none;
  }
  
  #post-1277.sticky a {
    color:#000;
  }
  
  #post-1277.sticky {
    position:absolute;
    top:26px;
    right:20px;
    z-index:33;
  }
  
  #post-1277.sticky .entry-content {
    width:100px;
    margin:0;
  }
  
  @media screen and (max-width:767px) {
    #post-1277.sticky {
      top:12px;
    }
  }

  There’s a media query in there to stop it looking terrible on tablets and smartphones, you might need to tweak the values a little until it looks as you want.

  You may also need to change the top position for logged in users to take account of the WordPress admin bar but I haven’t tested that fully, the code would be something like this if you need it:

  .logged-in #post-1277.sticky {
    top:10px;
  }

• 

  lucbauer · Member · Oct 12, 2014 at 1:10 pm

  • Copy link

  Hi, thanks so much for your help.