Poster next page text as a button?

I was wondering what removes your header. It must be some kind of scrolling stack you have on that page?

I’m using Foundation ‘Off Canvas’ with a separate logo for mobile. Not a great solution, but not sure what else to use as I have a number of sub-menus (probably too many menu items in reality) and other solutions were not great with that. I like the minimalism of the Hamburger icon v lots of menu items.

Off canvas annoys me though as it should be fixed (checkbox selected) but it still scrolls. Suggestions welcome!

Hi Steve,
I used you next button css, works like a Sharm, but i copied the " trick" to prev, it worked but not het nice border and letter. what went wrong? (i changed the code in the button to “<div class=“prev page”>Previous" and “<div class=“prev”>Previous")

.next {
background-color: #FFFFFF;
border: 1px solid #373738;
color: #373738;
padding: 5px 10px;
text-align: center;
text-decoration: none;
width:300px;
display: block;
margin: 20px auto;
cursor: pointer;
font-size: 22px;
align: center;
}

.next {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.next:hover {
background-color: #373738; /* Green */
color: #ffffff;
}

.prev {
background-color: #FFFFFF;
border: 1px solid #373738;
color: #373738;
padding: 5px 10px;
text-align: center;
text-decoration: none;
width:300px;
display: block;
margin: 20px auto;
cursor: pointer;
font-size: 22px;
align: center;
}

.prev {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.prev:hover {
background-color: #373738; /* Green */
color: #ffffff;
}

1 Like