WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi, I am new to coding and such and would greatly appreciate any help. I have the code for a custom navigation bar and social media buttons and would like to add them to my page. Any suggestions?
Thanks!
The blog I need help with is smittenwithpretty.wordpress.com.
We would have to see the code you are talking about. CSS is simply a styling document used by the browsers to position and style the elements of a web page. You cannot put anything other that "CSS" stuff into it.
Paste the code here between code tags per this example:
<code>all the code here</code>
Thank you so much for responding. This is the code I was given.
NAV BAR:
<center><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/home-34.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/deliciousness.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/diy2.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/homelife2.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/stylefashion.png" border="0" alt="Photobucket"></center>
SOCIAL MEDIA SET:
<center><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/fb-25.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/pins-13.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/instagram.png" border="0" alt="Photobucket"><img src="http://i1099.photobucket.com/albums/g400/tankandtink2/tweets-1.png" border="0" alt="Photobucket"></center>
First off, the HTML "center" tag was depreciated in HTML 4 and wordpress is now declaring HTML 5 as a doctype so the code will have to be modified.
Since you didn't put the code between code tags, I can't see all of it.
The nav bar stuff, would have to be put into a text widget and then CSS positioning used to move it up and into place.
The same would be true for the social media buttons.
If you want to put the code into two individual text widgets and put those into your sidebar we can see about moving them up and into position where you want them.
One thing to remember is that if you have any pages that you have set with a "no-sidebar" page template, they will not have the navigation or the social media buttons. That is because on no-sidebar pages, the entire sidebar and all its contents are gone.
Ok, I understood the second part about what you said and placed the code into two text widgets, its up now. One step closer! Any ideas on how to move it up? Again thank you so very much!
The part I don't know about is 4 vs 5...
Where do you want the social media icons?
where they are is fine, i would prefer them to be centered though.
Open the text widget and at the very beginning before any of your code, put this
<p style="text-align: center;">
then go to the very end of all your code and add
</p>
Ah it worked! Awesome!! Thanks a billion!
will that work on the nav links too? that won't bring them up, right?
No, the nav links will have to be done separately with CSS.
I don't see the nav links in your sidebar yet.
I took it off cause it looked funny, if it will help ill put them back up right now.
OK, where do you want that?
Across the top, underneath the header image
Go to appearance > custom design > CSS, delete all the informational text in the edit window and paste the following into it and click "preview." You may have to force refresh the preview page as sometimes it does not pick up the change immediately.
smittenwithpretty
#content {
padding-top: 50px;
position: relative;
}
#text-4 {
left: 0;
position: absolute;
top: -80px;
width: 100%;
text-align: center;
}It worked! Ah thank you so much! Seriously you have been so helpful!
You are welcome. If you want to adjust the spacing or anything, let us know.
Make sure and click "save stylesheet to save the CSS changes we did. They won't show up for the public until you do.
I did. Thanks again!
This topic has been closed to new replies.
