Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Floating Lightweight Social Icons

Home Forums Support Floating Lightweight Social Icons

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #372276
    Daren

    Hi, I want to have the social icons fixed to the side of the browser window aligned vertically. I have some code I used:

    .lsi-social-icons {
    position: fixed;
    top: 30%;
    z-index:3;
    }

    and this does work, to a point. On different screens they start to line up horizontally until they are all horizontal on tablets. I’d actually like them to disappear on mobile so I did a media query with same class selector with display:none but it didn’t work. Do you know of a solution to this problem. Thank you.

    #372295
    Leo
    Staff
    Customer Support

    Hi there,

    Can you link me to the page? Thanks!

    #372296
    Daren
    #372313
    Leo
    Staff
    Customer Support

    Hmm try:

    @media (max-width: 1600px) {
        .inside-header .header-widget {
            display: none;
        }
    }

    Let me know.

    #372314
    Daren

    Ok, thank you. I’ll let you known how it goes.

    #372593
    Daren

    Good morning Leo, works, thank you. Another problem, of course:) Now I want them to stack vertically. I applied display: flex and I was able to move it around with that so I know it connected, but when I applied flex-direction:column nothing happened. Justify-content:center did work so I’m a bit stuck here. What do you think?

    #372776
    Leo
    Staff
    Customer Support

    Stacked the social icon vertically?

    Try adding 4 header widgets instead of 1 and have 1 icon in each widget.

    Let me know if this works.

    #372786
    Daren

    It works, only problem is they are separated by 40px…I haven’t been able to target the icons to be able to change the margins.

    #372819
    Leo
    Staff
    Customer Support

    Try this:

    .separate-containers .header-widget .widget {
        margin-bottom: 0;
    }
    #372854
    Daren

    Where are you getting these selectors? When I use the inspector in Chrome I don’t see this.

    #372903
    Leo
    Staff
    Customer Support

    You should see this in inspector:

    .separate-containers .page-header, .separate-containers .site-main>*, .separate-containers .widget, .widget-area .main-navigation {
        margin-bottom: 20px;
    }

    And it’s being applied by the .separate-containers .widget selector.
    But if we simply do this:

    .separate-containers .widget {
        margin-bottom: 0px;
    }

    It will apply to all widgets. Therefore I added .header-widget so that it only applies to the widgets in the header widgets area.

    Let me know if this makes sense 🙂

    #372947
    Daren

    it does, thank you Leo.

    #372972
    Leo
    Staff
    Customer Support

    Glad I could help 🙂

    #373365
    Daren

    Good morning Leo, I have another question unrelated to the icons. BTW after all of this the client decided to just drop the icons in the footer…no worries, it’s all goos as long as they are happy. But the new question now is this: The way you have the GeneratePress site here is in order to comment the user has to be logged in. But if they don’t they can still access the site and see everything. Is there a way I can do that with my site? I want the visitors to be able to access the whole site and read the blog posts but only have to sign in if they want to make a comment on the blog, I don’t want to make them sign in or register otherwise. Can it be done?

    #373409
    Leo
    Staff
    Customer Support

    Those settings are handled by WordPress. Check Dashboard > Settings > Discussion.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.