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

Home Forums Support Social icons and Copyright on bottom of left sidebar

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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

    GeneratePress 1.4
    GP Premium 1.4.3
    #369941
    Tom
    Lead Developer
    Lead Developer
    #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?

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

    #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/

    #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

    #373079
    Leo
    Staff
    Customer Support

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

    @media (min-width:769px) {
        .site-footer {
            display: none;
        }
    }
    #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

    #373367
    Leo
    Staff
    Customer Support

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

    #373857
    Tom
    Lead Developer
    Lead Developer

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

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