[resolved] How to make the side-menu "disappear" in thin / smartphone mode? (5 posts)

  1. Toby Barnes
    Posted 1 year ago #

    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.

  2. batharoy
    Posted 1 year ago #

    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

  3. Toby Barnes
    Posted 1 year ago #

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

  4. Toby Barnes
    Posted 1 year ago #

    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.

  5. Toby Barnes
    Posted 1 year ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic