Off-canvas Push Menu?

[PEACH]

Just curious how I would go about installing a push menu on my forum? I'm confused as to where to put the different sections of code. I can post my forum wrapper codes if need be.

[Tumbleweed]

Dec 19, 2016 11:26:38 GMT -8 PEACH said:

Just curious how I would go about installing a push menu on my forum? I'm confused as to where to put the different sections of code. I can post my forum wrapper codes if need be.

Is the "Main Content Here" going to be your forum itself? What I mean is this part:


<div class="content">
Main Content Here
</div>


I stuck it on a test site and I'm still fiddling with it, but the css they gave didn't work correctly so I viewed their source css and had to edit out some things. If you pretty much want it like on my test site (forum is the "main content"), the css should just go at the bottom of your style sheet without the style tags, although you can just paste it in your forum wrapper right above the html part you add. For me, I put this part of the html right above the wrapper div (below in blue) which you should see in your wrapper template.

So it's like this:

<nav class="site-nav" id="site-nav">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Works</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="page-wrap">

<header class="main-header">
<a href="#site-nav">?</a>
<a href="#" class="close-menu">?</a>
<h1>Pure CSS Push Menu</h1>
</header>

<div class="content">
<div id="wrapper">

And then scrolled to the bottom of the wrapper template, found the last div that is already on the page and added the last two divs. The black is what I added and the blue is what is already there.


So like this:

$[footer]
</div>
</div>
</div>


If that isn't exactly what you wanted, can you give more details. Thanks. (By the way, if I were you, I'd rename all the <h> tags to something else because the css they gave changes all h tags on your whole forum and you may not want that. If I need to elaborate on that last bit, let me know.

Edit, I did want to add, the three line symbol (on my test site) for menu is below where it indicates it should be on that push menu demo page so not sure why that is. 

[PEACH]

Thank you so much for your help Tumbleweed! I've placed all the CSS and coding in the proper places, but I still can't get it to work. I do want the forum to be the 'content'. The 'push menu' part will not actually be a list of links, but rather a c-box in it's place. Is there any way you could tell me what I'm doing wrong? I have made edits to my wrapper div, if that has anything to do with it. Thank you so much!

[Tumbleweed]

Dec 20, 2016 8:35:25 GMT -8 PEACH said:

Thank you so much for your help Tumbleweed ! I've placed all the CSS and coding in the proper places, but I still can't get it to work. I do want the forum to be the 'content'. The 'push menu' part will not actually be a list of links, but rather a c-box in it's place. Is there any way you could tell me what I'm doing wrong? I have made edits to my wrapper div, if that has anything to do with it. Thank you so much!

Yep, the css they had for the public to use, didn't work for me either but I did pm you the css that does work. I pm'd it to you as I didn't want to post another sites code here out of respect for the code author and the fact that they want people to go to their site for the code.

Let me know if that works for you.

[PEACH]

It worked like a charm, thank you so much!

[Tumbleweed]

Dec 20, 2016 9:44:36 GMT -8 PEACH said:

It worked like a charm, thank you so much!

You're welcome. Glad it worked.