Support » Themes and Templates » Responsive » [Resolved] How to make the side-menu "disappear" in thin / smartphone mode?

[Resolved] How to make the side-menu "disappear" in thin / smartphone mode?

  • Hi there,
    I am trying to make a custom css file for this theme.
    However, I have noticed that when I collapse the width of the site while dragging the browser window, the side menu just keeps getting smaller and never disappears. At smart-phone size, it just looks ridiculously thin.

    I am under the impression that until recently, this didn’t happen… Before, if I dragged the window smaller (simulating a smart-phone screen) it would get to a point where the side menu would disappear from the right and appear under the page content instead.

    I might be confusing this with another theme.
    … However, how can I control when a menu (or other element) disappear when the browser window is collapsed (dragged thinner) please?

    Would appreciate any help you could offer me.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Check the @media queries in the original css, depending on what and how you are creating a new css, they might be overwritten by what you modified.
    By default the Responsive theme does what you want. The stacking effect is controlled by those @media queries.
    The original css for this will be found in /THEME FOLDER/core/css/responsive.css

    Thank you for this feedback. I’ll have a look for this @media code.

    I’ve been trying to crack this, but so far I haven’t been able to effect the responsive behaviour.

    I have create a child theme. It’s basically just a folder called “responsive-child” and within it are two css files “style.css” and “responsive.css”

    I’ve been working on the “responsive.css” file which I have adapted from the file with the same name in the parent theme.

    I’ve added this on the top of the page…
    @import url("../responsive/core/css/responsive.css");
    …so as to link it with the parent Responsive theme.

    Within these sections:
    @media screen and (max-width: 320px) {
    @media screen and (max-width: 240px) {

    … I have included this:

    .show-240 {
    	display: none;
    	.widget-wrapper {
    	display: none;
    	#widgets {
    	display: none;

    … to see if I can make the right sidebar (widgets) vanish when I collapse the browser window, but so far my edits have made no changes when checking the site.

    I have found the solution…

    For some reason, the responsive.css file in my child theme folder just wasn’t being read by the parent theme. Either it didn’t point/link to the parent theme properly, or it just didn’t like which folder it was sat in… not exactly sure(?)

    I copied the code from the responsive.css file and pasted it into the bottom of the style.css file, and re-uploaded it.

    Now my mod of the theme functions as it’s supposed to again. Sigh of relief… I have deleted the responsive.css file in my child theme, and all is well 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] How to make the side-menu "disappear" in thin / smartphone mode?’ is closed to new replies.
Skip to toolbar