Is there a way to style widgets and add social media icons just under the site title/ above profile pic?? Any good references?
Something like that would be different for each theme. What you can do is use absolute positioning to move the widget you used to add your social media icons to a different place in the layout. I put together an example to get you started:
In that example, I used the ID value "linkcat-50521619" as a selector in the last part of the CSS because that is what the links widget got assigned as a unique ID after you added it on the Appearance → Widgets page.
The relative positioning for "#page" was added so that you can position the links widget relative to the "#page" container element. See this link for a really nice explanation about how that works:
I added "overflow: visible" to the left sidebar container "#secondary" because the theme had set "overflow: hidden" for it before, but now we want to move something outside that space and still have it show up.
I suggest adding the example CSS from above inside a "@media screen and (min-width: 965px)" block in your Appearance → Custom Design → CSS editor so that you don't modify the other layouts that were created for smaller displays like iPads or mobile devices. If you want to move the social media icons in those smaller layouts as well, you will need to study how media queries, figure out which ones you want to target, and apply the example from above to different media queries to experiment in each one until you find a good set of CSS that works for each one you want to adjust.
Here is a good primer on media queries if you're interested: