Adding facebook/ social media icons to menu in Expound
-
Is it possible to add a ‘like’ or ‘follow’ facebook button to the menu bar? Or on a static side bar on the side where it follows even when you scroll down? Either one would be awesome! I use expound theme with css, and the social network widgets in the footer can get missed.
Thanks for any help!Stephen
The blog I need help with is: (visible only to logged in users)
-
Hi, I see you have some code in your custom CSS, but the menu item IDs do not match anything on your site. The menu item IDs will be unique to your site for the most part, so you have to look at the source code to determine the correct ID and selector structure for your site and your particular theme. The following replaces the text you have in your facebook menu item with a Genericons facebook font icon. Add the following to your custom CSS and see what you think.
#menu-item-512 a:before { content: 'f203'; font-family: Genericons; color: #FFFFFF; font-size: 23px; } #menu-item-512 a { font-size: 0; } #menu-item-512 a:hover:before { color: #A8A9EA; } -
Will this CSS work on my blog as well? Or are the colors specific to the blog of the originator of this post?
Chuck
maiwinc.wordpress.com
-
The code will work, but yes, the colors are for that particular site. Also, your menu item ID will be different, so the “512” will have to change. You can use the web inspector in your browser to identify the menu ID number, or you can view the source code from within your browser (typically on the view menu) and find the particular menu item to get the ID.
-
-
Thank you so much Sacred Path. I am currently on my way to learning CCS, but I am still so far off.
I wanted to ask: is it possible to have a sidebar that stays even when the site scroll, such as on this one: http://lifeshowyouliveit.com/
Please let me know if this is just a possibility with the wordpress.com
Thank you again!
Stephen
-
Stephen, sort of yes. What you can do is to put social media icons into a text widget and then style it and position it and set it to position: fixed. The buttons they have are using javascript, which is not allowed here at this time, but simple social icon HTML linked images can certainly be done.
-
You have been a great help. Very appreciative. I do not see an option for position: fixed. Under position are just numbers for the order I want it to show up.
Would you mind explaining this a bit more? Would I put this in the CSS code?
Thanks you again for your help! Hopefully I will learn enough about it so I wouldn’t have to bug y’all on here all the time.
Take care,
Stephen
-
This is just an example. It moves your blog stats widget up and to the left of the content area. There will be some decisions to be made. One will be what you want it to do on smaller screens that are narrower than the main content area. Add the code below to see what it does and then widen and narrow your browser window so you can see how things behave.
#blog-stats-2 { background: #FFFFFF; left: 20px; position: fixed; top: 200px; }To do this with the text widget, the ID for the rule will have to change. You will need to look at the source code for the page after you add the text widget and get the ID. It will look something like this: #text-4.
-
That’s just what I need; however is it possible to do it for a facebook like or direct to the facebook page? (either one would be awesome!). I did not happen to see the #text-4 like for any social media icons. Please advise and thank you!
Stephen
-
Or actually, the best would be the ability to share it. I do not know if this is possible; but, it would be nice to be able to do it here like i’ve seen on other websites. Regardless, I appreciate your help for the ability to do any mentioned!
-
You can add a link in the text widget to your facebook page, and you can put the facebook like box widget in your sidebar. Moving the facebook like box widget up to the right though is problematic since all the styling is controlled at FB’s end and it would be a nightmare to try and make it work to the outside of the content.
The share buttons from below posts and pages can be moved up into the area to the side of the content. Give this a try and see what you think.
div.sd-content ul { position: fixed; top: 400px; left: 10px; width: 70px; float: none; text-align: center; } -
The above will only show where sharing buttons are show. Since only excerpts are shown on category, tag and archives pages, the relocated sharing buttons would not show.
-
This was exactly what I was looking for! Thank you so much–this is great!! I really appreciate your time and effort on this so I can connect people better to my site, spread messages, and make relationships.
My utmost thanks to you Sacred path!
Stephen
-
Last time to bug ya about this issue (promise!). When I put the official icons on the page, the background cuts off part of them (where the number count is, and pushes some together). Would this able able to be easily resolved? If not, no worries. Again, I am very appreciative sir!
-
PS. I have tried moving them the most I can to the left but there is still the same issue. It looks like the background is cutting it off
-
I would suggest sticking with the round icons instead of the official icons and stick to text only, but if you wish to try it with the official icons, you can just adjust the width value.
- The topic ‘Adding facebook/ social media icons to menu in Expound’ is closed to new replies.
WordPress.com Forums 