Social Icons CSS Customization
-
I am using the triton lite theme and I would like to know if there’s a snippet for the following.
I had 3 widgets in the footer section aside from the social icons widget. I was provided with a snippet for those icons to be on the navigation bar next to the last category page “La Legion de El Capi”. and the snippet worked perfectly.
#wpcom_social_media_icons_widget-2 {
position: absolute;
top: 15px;
}However, I just recently got rid of those 3 widgets in the footer section but left that social icons widget in there and the positioning of those icons in the navigation bar changed. They moved to the left on the same position as the second to last navigation category that says “El carton de Iracheta” is there a snippet to fix that and get those icons to be where they were before getting rid of those 3 widgets?
If you can’t see the icons cause you are logged in, once you sign out and visit the page you will be able to see the positioning of those icons.
The blog I need help with is: (visible only to logged in users)
-
@vlogazul, I don’t see anything in the code that would have changed things on the position of the social icon widget when you removed the others. The issue we have is that there isn’t an overall container around all the content of the page, which means that when we reposition something, it is repositioned in relationship to the “body” which extends from border to border on the browser window.
The only way to keep it from interfering with the menu items would be to place it below the menu items above the top featured post image.
An alternative would be to make the blue section taller and move the icons below the menu items. We could do this with a Media Query and keep it as is until it starts to interfere with the menu item on the right and then move it below them.
Let me know your thoughts.
-
I see what you are saying. I added this to the snippet right: 170px; and it seems that it works perfectly on any computer except on the ipad and iphone versions of the page.
-
Hi @vlogazul, I hope you don’t mind me jumping in to help.
That’s where the media query would come in handy: you could specify this rule for larger screens, then tinker with a separate option for smaller ones.
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
That said, I took a look at your site and I don’t see the social icons right now, even when logged out.
Also, your theme is not responsive for mobile screens. Have you thought about switching to one of these similar themes that is responsive?
https://rebalancedemo.wordpress.com/
https://baskervilledemo.wordpress.com/There are others, too. Check how they display on smaller screens, too.
- The topic ‘Social Icons CSS Customization’ is closed to new replies.