Genesis Single Post Navigation positioning

[weezieb]

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/

[Tom]

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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[weezieb]

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!

[Tom]

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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts