Adding Header Links

• 

  groovethink · Member · Aug 27, 2013 at 10:17 pm

  • Copy link
  • Add topic to favorites

  I would like to add in links to the right of my header (next to the header image).

  The links I want to use are currently in the footer of my website on my home page. They are under the section entitled “Connect.”

  There isn’t a header bar where I could just drop a widget in there, so I guess I’d have to change the coding (not sure though). I would like the links to be just an image that is clickable and will open a new window for the link. Plus I would also like to be able to have them listed horizontally… just across from Groove Think.

  Is this possible?

  Frederick Jones

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

• 

  timethief · Member · Aug 27, 2013 at 10:21 pm

  • Copy link

  This thread will be moved to the CSS Forum for you. Please do not create a duplicate thread.

• 

  thesacredpath · Member · Aug 30, 2013 at 3:17 am

  • Copy link

  Fredrick, give the following a try. I’ve aligned it sort of to the right of the menu. You can adjust the “top” and “right” values to move it around to where you want it.

  #linkcat-2099498 {
      position: absolute;
      right: 50px;
      top: 220px;
      width: 250px;
  }
  #linkcat-2099498 ul {
      display: inline-flex;
      list-style: none outside none;
  }
  #linkcat-2099498 h1 {
      display: none;
  }

• 

  groovethink · Member · Aug 30, 2013 at 2:07 pm

  • Copy link

  @thesacredpath,

  Thanks man. That worked perfectly. Great work.

  I have another question located below. Not sure if you work strictly in CSS… but this one seems to be simpler.

  https://en.forums.wordpress.com/topic/editing-my-posts-pages?replies=1#post-1408557

• 

  thesacredpath · Member · Aug 30, 2013 at 6:06 pm

  • Copy link

  @groovethink, you are welcome. I just noticed one alignment issue in Safari, so replace the code I had previously given with the below and it will take care of the Safari issue.

  #linkcat-2099498 {
      position: absolute;
      right: 150px;
      top: 150px;
      width: 300px;
  }
  
  #linkcat-2099498 ul {
      list-style: none;
  }
  
  #linkcat-2099498 h1 {
      display: none;
  }
  
  #linkcat-2099498 ul li {
      display: inline;
  }

  I’ll take a look at your other topic and see what I can do.

• 

  groovethink · Member · Aug 30, 2013 at 7:05 pm

  • Copy link

  Awesome, thanks.

• 

  thesacredpath · Member · Aug 30, 2013 at 7:08 pm

  • Copy link

  You are welcome.