Support » Theme: Kale » Help with How to get Socials on top left margin

  • Resolved sierraalbis


    Hi there! I am trying to get my socials (Pinterest, Facebook, etc) on the top left margin over my blog name. It shows up nicely on my laptop, but whenever on the phone format they don’t show up. It just has another drop down menu above my title which doesn’t look very aesthetic. Is there a way to fix that on the phone format? So that they regularly display in the top left corner? Thank you!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi Sierra,

    Sorry to hear about the trouble- could you possibly share the url so we can see what’s up and help to get it resolved?

    Thanks so much!

    Hey Sierra,

    Just a follow up, I see what you mean now. You can disable that drop down by adding this CSS in Appearance > Customize > Additional CSS:

    @media (max-width: 767px) {
        .header-row-1-toggle { display: none; }
        .header-row-1 { max-height: unset; }

    I believe it centers and stacks by default, but if you want it to stay left even on small screens, I can help with that too.

    Hi Steven! Thanks so much! It does Centre and stack like you mentioned. How do I get them even on the left side?? Thanks so much for your help!

    Hey Sierra,

    Could I possibly get your url so I can see what we need to account for in the header widget areas? Then I can give you something specific that will work with your setup.


    Of course! Thank you.. My URL is

    Thank you.

    However, there is no Social menu at your website at the moment so it is not possible to see it on either desktop or mobile view, but you can try this CSS:

    @media (max-width: 767px) {
    	.header-widget.widget_nav_menu { float: left; }

    If it doesn’t work, we’d need to see the menu active on your website.

    Kind regards.

    Hi there! I tried the CSS but it is still not working. I have left it up there for your reference. I just want it to be in the left header without that drop down arrow – Any help would be much appreciated.

    Hi @sierraalbis.

    It appears that you’ve removed the CSS my colleague gave you few messages above –

    You’ll need both that CSS and the one I’ve posted, you can paste them one below another.

    I hope this helps.

    Hi @siniplyrathemes I got it to work and show up without the menu, but unfortunately there is now a line under it. How do I get rid of this? Thanks!

    I apologize for all the questions!

    @siniplyrathemes Also, the pinterest logo does not want to show up for some reason. Any assistance ASAP would be great thanks!

    Hi Sierra,

    You can remove the line with this bit of CSS:

    @media (max-width: 767px) {
        .header-row-1-left .menu-social-container { border-bottom: none; }

    Looks like the Pinterest icon isn’t showing because the Pinterest url doesn’t include a “.com”. Since yours is “.ca”, you can add this CSS to correct it:

    .widget .menu-social-container .menu li a[href*=""]::before {
        content: '\f0d2';

    Thanks again!

    Thank you so much for your help! I got it working!!

    Glad to hear this, thanks for letting us know!

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.