Genesis Single Post Navigation positioning

Community Forums Forums General Discussion Genesis Single Post Navigation positioning

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Tom 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #95881

    weezieb
    Participant
    Post count: 15

    Hi! I am using Genesis Single Post Navigation and it’s working well but I was wondering if I could move the arrows in a bit. I have played with the CSS and it isn’t working for me. I want the site to remain mobile responsive. When on a large screen the arrows are so far out that my test users don’t see them… I managed to change the look but can’t get them to float right next to the inner wrapper on the stretch theme. Let me know if this doesn’t make sense.
    Thanks!

    http://69.89.31.140/~sealyonc/heatherfoster/
    #96104

    Tom
    Participant
    Post count: 945

    Remove:

    .navigation .alignleft {
        left: 0!important;
    }
    
    .navigation .alignright {
        right: 0!important;
    }
    
    .navigation .alignleft, .navigation .alignright {
        position: fixed;
        top: 48%!important;
    }

    Add:

    .navigation {
        position: relative;
    }
    
    .navigation .alignleft {
        position: absolute;
        left: 100px;
        bottom: -30px;
    }
    
    .navigation .alignright {
        position: absolute;
        right: 100px;
        bottom: -30px;
    }

    Adjust position as necessary, padding, etc.

    You may have to add some “!imporant” boots to this because you’re fighting the default styling from GSPN. See option 2 in the GSPN FAQ (“Add a stylesheet file gspn-additons.css” etc.)


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #96650

    weezieb
    Participant
    Post count: 15

    HI! Thanks for your response. I did end up following the guidelines on the GSPN Faq page- I added a gspn-additions stylesheet to my child theme. The buttons are still floating and this fix doesn’t seem to make them ‘stick’ to the outsides of the content wrapper- is there a way to do that? I still want them to be responsive. I’d like them to be right on the border of the wrapper. Thanks again!

    #96678

    Tom
    Participant
    Post count: 945

    Ah. You want them to float *outside* #wrap, or #content-sidebar-wrap or #content.

    This would be the standard appearance for GSPN. If you install GSPN on a default (Stretch) theme GSPN will place the prev/next chevrons 42% down the page on each side at the edges of the viewport. They are positioned in a #gspn div that is a sibling to #wrap. Then if would only be a matter only of pulling them in to ride the wrap. (Insert Elmore Leonard references here. :) )

    Your structure has been changed significantly, placing GSPN 3 levels inside #wrap. and subordinate even to #content.

    Your structure is: #wrap > #inner > #content-sidebar-wrap > #content > .navigation

    You can see the difference to a simple install here: http://www.tiikoni.com/tis/view/?id=0b6bc6c

    I don’t know if you can position it outside again and have it become visible with CSS alone – tried with z-index values to no avail. Also, while you do have a “gspn-additions.css” file, it does not have any influence on the GSPN nav elements as the statements are either commented-out, a media query, or not part of the GSPN structure on your page.


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

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

You must be logged in to reply to this topic.