Community Forums › Forums › Archived Forums › General Discussion › Genesis Single Post Navigation positioning
Tagged: Genesis Single Post Navigation, GSPN, next, prev, Stetch
- This topic has 3 replies, 2 voices, and was last updated 10 years, 10 months ago by
Tom.
-
AuthorPosts
-
March 20, 2014 at 3:09 pm #95881
weezieb
MemberHi! 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.
http://69.89.31.140/~sealyonc/heatherfoster/
Thanks!March 22, 2014 at 4:35 pm #96104Tom
ParticipantRemove:
.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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]March 25, 2014 at 3:23 pm #96650weezieb
MemberHI! 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!
March 25, 2014 at 9:43 pm #96678Tom
ParticipantAh. 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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ] -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.