WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Social buttons in menu area (28 posts)

  1. davidgabunia
    Member
    Posted 1 year ago #

    How to move social buttons from the header in menu area?

  2. davidgabunia
    Member
    Posted 1 year ago #

    I need something like this

  3. davidgabunia
    Member
    Posted 1 year ago #

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    How much CSS knowledge have you?

  5. davidgabunia
    Member
    Posted 1 year ago #

    50%+/-

  6. davidgabunia
    Member
    Posted 1 year ago #

    I know a lot, but not enough for do that.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Does that theme come with a section in the dashboard named, "Custom Styles", "Custom CSS" or "Jetpack"?

  8. davidgabunia
    Member
    Posted 1 year ago #

    Yes, this theme has special area named "Custom CSS" where I can enter my custom CSS.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post a link to your website?

  10. davidgabunia
    Member
    Posted 1 year ago #

    no, because i'm working on local server

  11. davidgabunia
    Member
    Posted 1 year ago #

    but I can give you this theme demo http://demo.onedesigns.com/pinboard/

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding this to your Custom CSS section;

    #access,
    #header {
     position: relative;
    }
    
    #social-media-icons {
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 2;
    }
  13. davidgabunia
    Member
    Posted 1 year ago #

    Done. The buttons have disappeared from header, but did not appear in the menu.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    That CSS works in conjunction with the demo website, which is why it's imperative to see your website.

  15. davidgabunia
    Member
    Posted 1 year ago #

    On, I will upload my site somewhere and will write here. Thx for help.

  16. davidgabunia
    Member
    Posted 1 year ago #

    Andrew, here it is http://sandroshakulashvili.com
    Help, please, it's very important for me.

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    I am helping, David.

    Add this;

    #social-media-icons {
     margin-top: 0;
    }

    and change my last excerpt of code from my prior code,
    from this

    #social-media-icons {
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 2;
    }

    To this;

    #social-media-icons {
     position: absolute;
     right: 0;
     top: 0;
     z-index: 2;
    }
  18. davidgabunia
    Member
    Posted 1 year ago #

    So right now I have this in my Custom CSS section:

    #access,
    #header {
    position: relative;
    }

    #social-media-icons {
    margin-top: 0;
    }

    #social-media-icons {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    }

    Is i right? does not work

  19. davidgabunia
    Member
    Posted 1 year ago #

    WOW! I see the second facebook and youtube images, but not the first one

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes.

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't know how you set those social icons, but there simply aren't any other social icons other than the ones you see, being outputted to the browser.

  22. davidgabunia
    Member
    Posted 1 year ago #

    You know, I can not the first images just because they are too pale.

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    Then you need to change the image itself http://sandroshakulashvili.com/wp-content/themes/pinboard/images/youtube.png for each social icon.

  24. davidgabunia
    Member
    Posted 1 year ago #

    Yes I know :) So, it works :)
    Omg I'm so thankful :)

  25. davidgabunia
    Member
    Posted 1 year ago #

    How can I change the position of the buttons?
    I mean padding, margin etc.

  26. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can use the top and right values in the #social-media-icons selector.
    E.g;

    #social-media-icons {
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 2;
    }
  27. davidgabunia
    Member
    Posted 1 year ago #

    Ok, thx again.
    RESOLVED

  28. dberm22
    Member
    Posted 1 year ago #

    Thanks, but I had to use this code to get it to work:

    a.social-media-icons,
    #social-media-icons {
    position: absolute;
    margin-right: 20px;
    margin-top: 0;
    right: 0;
    top: (YOUR HEADER HEIGHT IN PIXELS +11) px;
    z-index: 2;
    }

    Check it out... My Site

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.