Inserting social media icons into navigation bar

• 

  ariannasrandomthoughts · Member · Jul 17, 2013 at 6:28 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have my social media icons in a widget right now on my sidebar but I would like to move them up to the navigation bar(below the header image). I have css but unsure of how to do this in the Adventure Journal theme I use. Thanks so much for your help!

  Arianna

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

• 

  timethief · Member · Jul 17, 2013 at 6:31 pm

  • Copy link

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

• 

  designsimply · Member · Jul 18, 2013 at 3:04 pm

  • Copy link

  You can use absolute positioning to move a widget to somewhere else on the page.

  The first thing you’ll need to do is figure out the unique identifier for the widget you created. To find out what the identifier is, right-click on the widget and select the “Inspect Element” option. That should pull up a panel showing the HTML for what you clicked on as well as all of the CSS that applies to on the right. Look in the HTML into you find the widget in question. Here is an example from your website:

  <div id="text-7" class="widget widget_text">

  Based on that HTML, the id=”text-7″ part can be used to target just that widget with CSS. Here is an example of absolute positioning to get you started:

  #secondary #text-7 {
  	position: absolute;
  	top: -10px;
  	right: 60px;
  	background-color: inherit;
  	background: none !important;
  }
  
  #text-7 h3 {
  	display: none;
  }

  You will need to add just the number values to your liking. As you can see, I also removed the background color and image and hide the title ( the last rule, for the “h3” element). You can decide whether or not keep those and it just the CSS accordingly.

• 

  ariannasrandomthoughts · Member · Jul 18, 2013 at 7:21 pm

  • Copy link

  Thanks for your help. Greatly appreciated! I cant seem to find the “Inspect Element” option. I can follow the rest of what you are saying – but that is where I’m stuck.

• 

  designsimply · Member · Jul 18, 2013 at 8:32 pm

  • Copy link

  Ah, I should have mentioned that if you are using Internet Explorer, they do it differently. Pressing the F12 key should open the developer tools in that browser. Also see http://msdn.microsoft.com/en-US/library/gg589512.aspx#OpeningTools

• 

  ariannasrandomthoughts · Member · Jul 18, 2013 at 10:24 pm

  • Copy link

  Ok I found it – and tried adding it along with the other in css and didn’t work. Thanks for your patience and guidance.

  <div id=”text-7″ class=”widget widget_text”><h3 class=”widget-title”>Connect With Me</h3> <div class=”textwidget”><img src=”http://i1235.photobucket.com/albums/ff423/arandomthoughts/32x32px_Facebook.png” border=”0″ alt=”Photobucket”>
  <img src=”http://i1235.photobucket.com/albums/ff423/arandomthoughts/32x32px_Twitter.png” border=”0″ alt=”Photobucket”>
  <img src=”http://i1235.photobucket.com/albums/ff423/arandomthoughts/32x32px_Pinterest.png” border=”0″ alt=”Photobucket”>
  <img src=”http://i1235.photobucket.com/albums/ff423/arandomthoughts/32x32px_GooglePlus.png” border=”0″ alt=”Photobucket”>
  <img src=”http://i1235.photobucket.com/albums/ff423/arandomthoughts/32x32px_RSS.png” border=”0″ alt=”Photobucket”></div>
  </div>

• 

  designsimply · Member · Jul 22, 2013 at 8:50 pm

  • Copy link

  I checked http://ariannasrandomthoughts.com/ and the CSS example from above isn’t saved. Can you try copying it and saving it in the Appearance > Customize > CSS panel again and let me know if the CSS itself actually saves for you? Try closing and re-opening the Customize link to make sure the CSS save really worked.

• 

  ariannasrandomthoughts · Member · Aug 21, 2013 at 9:07 pm

  • Copy link

  Sorry it took so long to try this – I did and it works so thank you so much!