Archived topic

Floating Lightweight Social Icons

15 replies · Started by Daren on August 23, 2017

Viewing posts 1–15 of 16

August 23, 2017 at 5:27 pm #372276

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.

August 23, 2017 at 5:59 pm #372295

Hi there,

Can you link me to the page? Thanks!

August 23, 2017 at 6:02 pm #372296

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

August 23, 2017 at 6:54 pm #372313

Hmm try:

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

Let me know.

August 23, 2017 at 6:57 pm #372314

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

August 24, 2017 at 6:08 am #372593

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?

August 24, 2017 at 9:49 am #372776

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.

August 24, 2017 at 9:59 am #372786

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.

August 24, 2017 at 10:54 am #372819

Try this:

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

August 24, 2017 at 11:40 am #372854

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

August 24, 2017 at 12:51 pm #372903

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 :)

August 24, 2017 at 1:39 pm #372947

it does, thank you Leo.

August 24, 2017 at 2:08 pm #372972

Glad I could help :)

August 25, 2017 at 8:24 am #373365

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?

August 25, 2017 at 9:13 am #373409

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

This archived topic is closed to new replies.

Start building better websites today.