Results 1 to 3 of 3

Thread: Question about Responsive SideToggle Menu also

  1. #1
    Join Date
    Jan 2018
    Thanked 0 Times in 0 Posts

    Default Question about Responsive SideToggle Menu also

    1) Script Title: Responsive Side Toggle Menu

    2) Script URL (on DD): * Responsive Side Toggle Menu(c) Dynamic Drive (
    * Last updated: July 21, 15'
    * Visit for this script and 100s more.

    3) Describe problem:
    Hello! I would like to use your Responsive Side Toggle menu for my website.
    I've set it up and I really like it and it works beautifully.
    It uses a button for "Toggle Menu 1" and "Toggle Menu 2" ,which is great.
    However, my pages are rather long and the buttons don't stay "fixed" at the top
    of the viewed part of the page, they scroll out of site as the viewer scrolls down.
    Is there a way to make the buttons be "fixed"?
    I've tried everything I can think of, also I've posted the question on Invisionzone, the W3schools forum site
    but so far no reply.
    Can you help me?
    John (keytoner)

  2. #2
    Join Date
    Sep 2007
    The Netherlands
    Thanked 266 Times in 258 Posts
    Blog Entries


    You can make the buttons fixed by using 'position: fixed'. Examples:
    <button onClick="menu1.toggle()" class="sideviewtoggle" style="position: fixed; top:2px; left:2px">Toggle Menu 1</button>
    <button onClick="menu2.toggle()" class="sideviewtoggle" style="position: fixed; top:2px; right: 2px">Toggle Menu 2</button>
    Note that these positions given to the toggle buttons will make them invisible when the menu(s) expand(s). In order for the buttons not to be hidden by the menus, you have to make sure that the top position for the menus is not '0' (= the default top position in sidetogglemenu.js), but, say, '50px' (or higher). It's very easy to edit sidetogglemenu.js. Open the file, look for the line that starts with $menu = $(menuref).css, then replace top: 0 with top: '50px' (or something similar). You also have to make a changement in sidetogglemenu.css. Open that file, look for height: 100% and replace that with height:calc(100% - 50px).

  3. #3
    Join Date
    Jan 2018
    Thanked 0 Times in 0 Posts


    Thanks a Million -Arie !
    I'm beginning to understand why NASA never calls me for advice!
    John (keytoner)

Similar Threads

  1. Replies: 2
    Last Post: 09-07-2017, 04:53 PM
  2. Responsive Menu Help
    By dmwhipp in forum JavaScript
    Replies: 2
    Last Post: 02-16-2017, 10:55 PM
  3. eFluid Responsive Top Menu
    By dave54 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-06-2016, 02:16 PM
  4. eFluid Responsive Top Menu
    By button1 in forum Bug reports
    Replies: 1
    Last Post: 04-04-2016, 09:22 PM
  5. Replies: 5
    Last Post: 07-21-2015, 09:54 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts