Social icons and Copyright on bottom of left sidebar

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

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?

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%;
    }
}

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.

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/

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

You can hide footer and footer widgets on desktop like this:

@media (min-width:769px) {
    .site-footer {
        display: none;
    }
}

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

No that's not possible unfortunately. Will ask Tom to confirm :)

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