Modifying the small screen settings

  • Resolved Res2

    (@res2)


    10 years, 5 months ago

    Hi

    I’m having troubling finding out where and how to modify the smallscreen (<641px)settings of Raindrops.

    Top to bottom, there are 4 divs that I’d like to make some adjustments to.

    1. The mobile menu below the header: How and where can I add text (and links) to this menu?
    It would be highly useful, as I’m thinking that I’d like to let this horisontal menu replace the left sidebar on small screens, where there are no room for the sidebars, anyhow. (see below)

    2. div.yui-u:nth-child(1) should use 100% of the width on small screens, with the right sidebar dropping below it.
    How do I achieve this?

    It presently appears to be stuck using the same 83% in this format, that it is set to use on bigger screens (>640). Probably because I found it necessary to use width: 83% !important; to make it respond to the new width rule at all. If this is indeed the problem, is there another way to code it to respond to the 83% rule on bigger screens?

    3. .rsidebar: Is there some way to adress this on small screens only, in css?
    Since it drops below (2) I’d like to modify its styling, or maybe just display none of it, or nothing but search, in this format, and possibly let (1) take over it’s other items.

    4. since the left sidebar is pushed to the bottom, I think I’d prefer to display none of it in the small screen format.
    How can I adress it to do so, on small screens only?

    gestaltudvikling.dk

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Res2

    (@res2)

    Regarding (1) I’ve located the mobile menu in functions.php, but I hesitate to modify it at this point for two reasons:
    First, whatever I alter there (links and menu points added) will be overwritten first time the theme is updated.
    Second, it seems that there must be another way to modify this menu, than relying on my own coding ignorance to go bumping through something as vital as the functions.php of (the parent theme) Raindrops?

    Any advice on how to proceed?

    Thread Starter Res2

    (@res2)

    In regards to (1), I’ve added this code to functions.php, to serve up some menu points:
    <ul class="mobilmenu"><li><a class="mobilmenu" href="https://gestaltudvikling.dk">Forside</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/metoder">Metoder</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/problemtyper">Problemtyper</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/priser">Priser</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/artikler">Artikler</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/kontakt">Kontakt</a></li></ul>

    There are a few crucial problems with this solution, though:
    (1) a
    The entire code addition will be automatically deleted once the theme is updated.

    (1) b
    This menu doesn’t collapse above 640px screens, like it should.
    I don’t know how to correct that.

    Theme Author nobita

    (@nobita)

    Please try below

    1. open raindrops/responsiveness.css and save child theme /responsiveness.css

    2. Customize Style rules theme /responsiveness.css

    line:138

    #doc3 #ft .widget-wrapper ul,
    #doc3 #bd .yui-b,
    #doc3 #yui-main {
        float:none;
        margin:0;
        margin-left:0;
        margin-right:0;
        display:block;
        max-width:100%;
        width:100%;/* change this line width:100%!important */
        box-sizing: border-box;
        clear:both;
        background-repeat:no-repeat;
        position:static;
    }

    line:163

    #doc3 .rsidebar,
    #doc3 .lsidebar,
    #doc3 div.post,
    #doc3 article{
        margin:0 8px!important;/* remove this line */
        box-sizing: border-box;
    }

    Thank you.

    Thread Starter Res2

    (@res2)

    Thanks, nobita! This looks a lot nicer! ??
    And it solves number (2) of my small screens issues.

    I’m still trying to figure out how to put my horizontal menu links (presently colored purple for ease of reference) under the mobile menu wrapper…? (My number 1 issue on the list.)
    I expect it will have to be added to some php file, right?
    Somewhere in the header, perhaps?

    And is there some way to specify the sidebar styling separately for the small screens format, without interfering with the big screens styling?

    all the best

    Theme Author nobita

    (@nobita)

    Remove holizontal menu bottom black area ?

    Try below( add style )

    #doc3 .raindrops-mobile-menu {
 display: none!important;
}

    Thank you.

    Thread Starter Res2

    (@res2)

    Hi nobita

    no, that is not what I wish for.
    Instead, I’d like to remove the horizontal menu on 641+ screens
    by placing it in raindrops-mobile-menu.

    How is this done?
    I can find no interface for the mobile menu anywhere.

    Thread Starter Res2

    (@res2)

    I still wish to make use of raindrops-mobile-menu but I do not know how to.

    Where, in which php file, should I add the ul with my menu points, in order to make that ul appear in the mobile menu, when it is activated?

    For now, the mobile menu (which appears on small screens with width<641 px) is empty, except for a placeholder word: ‘menu’.
    Unfortunately, it seems that the place (in functions.php) where it says ‘menu’ cannot contain a ul properly (since it becomes permanently visible which is not the idea of having the mobile menu), so that is apparently not the right place for it…

    Theme Author nobita

    (@nobita)

    Please try

    Open resposiveness.css line:62

    .raindrops-mobile-menu .close{
        position:absolute;
        top:2px;
        right:5%;
        font-size:153.9%;
        width:10%;
        background: url(images/raindrops-nav-menu-shrunk.png);
        background-repeat:no-repeat;
        background-position:center;

        height: 1.5em; /* Add this style rule */
    }

    Sorry too late

    thank you

    Theme Author nobita

    (@nobita)

    Since 2 weeks there is no reply I will change to Resolved

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Modifying the small screen settings’ is closed to new replies.