How to create a mobile device menu icon

  • Resolved ajnphoto

    (@ajnphoto)


    7 years, 7 months ago

    [ Moderator note: moved to Fixing WordPress. Please do not use Developing with WordPress for these topics. ]

    Hi,

    My website uses media queries to render a mobile friendly version of the site on mobile devices. The questions below refer to the mobile version only, as I’m happy with the desktop version.

    1. Does anyone know the CSS code to convert the menu on the https://www.andrewnewey.com into an expandable menu icon on the mobile site? As you can see from the link the menu items appear at the bottom of every page of the mobile site, which is not ideal on long pages.

    2. Does anyone know the CSS code to make the header section permanently visible at the top of pages? Currently when you scroll down the pages the header disappears.

    There may well be a plugin which does this but I’m trying to keep the number of plugins down to a minimum, so if I can insert the code myself into media queries section of my stylesheet.css file, then this would be more preferable.

    Many thanks

Viewing 2 replies - 1 through 2 (of 2 total)

  • The easiest way to improve the mobile menu is to install a plugin that does it well. I use this one:
    https://www.ads-software.com/plugins/mobile-menu/
    I also minimize plugins, doing most of the coding myself. Creating your a mobile menu is a project that will require a lot PHP JavaScript and CSS. If you go that route though it will look much better than a generic mobile menu, and improve the site load time marginally in some cases if you consolidate stylesheets and JavaScript files.

    To make the header sticky you can use JavaScript or jQuery to ‘detach’ the header when the user scrolls down by some set amount. The JavaScript just needs to give the header div ‘position: absolute’ and some parent element position
    : relative’. The body being relative already may be fine. You probably won’t need to position it with ‘top’ and ‘right’ and ‘left’, it will just sit at the top of the page by default.

    You could also make the header static and always absolutely positioned so it isn’t a part of the page but sitting over it, and put a white div placeholder behind it so content can’t scroll up behind and be hidden.

    • This reply was modified 7 years, 7 months ago by jpurdy647.
    • This reply was modified 7 years, 7 months ago by jpurdy647.
    Thread Starter ajnphoto

    (@ajnphoto)

    Hi,

    I did try that menu plugin but it stopped the homepage slideshow working so uninstalled it. As you your other suggestions, I’m not a developer so they go straight over my head!

    Thank you anyway!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to create a mobile device menu icon’ is closed to new replies.