Social icons and Copyright on bottom of left sidebar

This topic has 10 replies, 3 voices, and was last updated 8 years, 7 months ago by Tom.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
August 20, 2017 at 9:03 am #369867

Yannick

Hi,
I try to build a fixed left-sidebar-navigation, like this page: http://www.vivianmaier.com

I managed to fix the side bar but I don’t know how to place the social icons and the copyright on the bottom of the side bar. Does someone perhaps have a solution for this problem?

Is it possible to adjust the spacing between the social icons? I’m using Lightweight social icons.

http://www.sykeramik.com/about

Best wishes
Yannick

August 20, 2017 at 11:09 am #369941

Tom
Lead Developer
Lead Developer

You should just be able to use widgets as long as you use a method like this: https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/#post-253050

August 21, 2017 at 1:11 am #370215

Yannick

Thank you Tom.

I did it the same way, I’m able to use widgets. But I’m not able to place the widgets on the bottom of the page in the left corner and I would also like to place the copyright under the social icons in the left sidebar where my navigation is located.

Like here: http://www.vivianmaier.com

I’m only able to do it like this: http://www.sykeramik.com/about

Is it possible to change the spacing between the social icons?

August 21, 2017 at 12:14 pm #370643
Tom
Lead Developer
Lead Developer
Replace your CSS with this:
```
@media (min-width: 769px) {
    .site-header {
        display: none;
    }
    
    .sidebar {
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: top center;
        border-style: hidden;
        border-top-width: 0px;
        border-top-style: solid;
        border-top-color: #ffff;
        width: 15%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        opacity: 1;
        padding-top: 3%;
        padding-bottom: 5%;
        margin-left: 5%;
        box-sizing: border-box;
    }

    .inside-left-sidebar {
        height: 100%;
    }

    .gen-sidebar-nav {
        height: calc(100% - 100px);
    }

    .footer-widgets {
        padding-left: 20%;
    }

    .site-info {
        padding-left: 20%;
    }
}
```
August 23, 2017 at 8:06 am #371976

Yannick

I’m getting closer, thank you Tom.
I use now a Text-widget <span style="color: black; font-family: 'Alegreya Sans SC'; font-size: small;">© 2017 <b>•</b> SYKeramik</span> in the left sidebar under the LightweightSocialIcon Widget.

Is it possible to get the actual year like in the Copyright-Addon?

Can I change the spacing between the Social Icons in the LightWeightSocialIcon Widget? (Cannot find where to change what in the PluginEditor)

How can I change the spacing between the LightweightSocialIcon Widget and the Text Widget? (I don’t know how to address the widgets in SimpleCss)

When I look at the page in mobile view, the logo and the menu are located on the bottom of the page, under the content. How can I change this up top? It would be nice if the SocialIcons Widget and the Text Widget would keep the position under the content.

August 23, 2017 at 11:35 am #372151
Tom
Lead Developer
Lead Developer
For the date, you’d have to build a shortcode:
```
add_shortcode( 'date', 'tu_date_shortcode' );
function tu_date_shortcode() {
    return get_the_date( 'Y' );
}
```
Spacing between icons:
```
.widget_lsi_widget .lsi-social-icons li {
    margin: 0 10px 10px 0 !important;
}
```
Spacing between widgets:
```
#left-sidebar .widget {
    margin-bottom: 10px;
}
```
As for mobile, you’ll need to hide the sidebar:
```
@media (max-width: 768px) {
    #left-sidebar {
        display: none;
    }
}
```
Then enable the mobile header: https://docs.generatepress.com/article/mobile-header/
August 24, 2017 at 2:08 pm #372974

Yannick

And once more: Thank you, my sidebar looks perfect now! 🙂

The shortcode for the date I didn’t get yet, need to do some more research.

For Mobile:
I used the mobile header for the menu and logo like you said. Now I would like to place 3 widgets, which are on desktop devices on bottom of my left sidebar, centered on bottom (under content) of the mobile page.
Is this possible? Activating footer widgets and footer only for mobile devices?

Best wishes
Yannick

August 24, 2017 at 7:40 pm #373079
Leo
Staff
Customer Support
You can hide footer and footer widgets on desktop like this:
```
@media (min-width:769px) {
    .site-footer {
        display: none;
    }
}
```
August 25, 2017 at 12:48 am #373203

Yannick

Hi Leo,
thank you!
When I deactivated it, does it still get loaded on desktop and just not shown?

A way to activate the footer for mobile instead of deactivating is not possible?

Best wishes
Yannick

August 25, 2017 at 8:30 am #373367

Leo
Staff
Customer Support

No that’s not possible unfortunately. Will ask Tom to confirm 🙂

August 26, 2017 at 10:34 am #373857

Tom
Lead Developer
Lead Developer

Unfortunately CSS is the only way to have something display on mobile/desktop and not the other.
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

[Resolved] Social icons and Copyright on bottom of left sidebar

Popular Articles

[Resolved] Social icons and Copyright on bottom of left sidebar

Popular Articles

Start building better websites today.