[Resolved] Floating Lightweight Social Icons

[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.

[Leo]

Hi there,

Can you link me to the page? Thanks!

[Daren]

Here you go:
http://wordpress.p2ptransportation.com/

[Leo]

Hmm try:

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

Let me know.

[Daren]

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

[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?

[Leo]

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.

[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.

[Leo]

Try this:

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

[Daren]

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

[Leo]

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 🙂

[Daren]

it does, thank you Leo.

[Leo]

Glad I could help 🙂

[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?

[Leo]

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

[Author]

Posts