• Resolved thaggles

    (@thaggles)


    Hey guys (and Kathryn!),

    I am completely new to WordPress and have only messed with it once before, using Boardwalk. Well I saw Cubic and had no idea that it was a mod of Boardwalk, how exciting!

    Onto my question, and please don’t hate me if it is an easy one! I have a menu on the right side like everyone else, how would I make that only come out about 30% of the way and stay on the right hand side and display the contents on the page on the remaining 70%?

    Also, is there a way to remove the word “Menu” from the flyout menu?

    The website in question is just one I am playing around in to learn WordPress, and it is http://thaggles.com

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @thaggles!

    Yes you can! This CSS should do the trick:

    @media screen and ( min-width: 1020px) {
        .sidebar {
            width: 30%;
            overflow: auto;
            right: 0;
            left: auto;
        }
        .sidebar-content {
            width: auto;
        }
        .sidebar .menu-title {
            display: none;
        }
    }

    I’ve intentionally limited it to larger screens only, so the sidebar isn’t squashed on mobiles 🙂

    Is it possible to keep the home page visible?

    When I add your code in the CSS and push on my Menu icon the homepage turns white.

    http://www.gadgethingy.com

    Oh no! Sorry about that.

    While I was looking at that, I noticed another issue – the sidebar stops suddenly after the last widget if it’s left open when you scroll down.

    To fix that, I modified the CSS to keep the sidebar stationary, but scroll separately from the main page. Replace what I gave you last time with this:

    @media screen and ( min-width: 1020px) {
        .sidebar {
            width: 30%;
            overflow: scroll;
            right: 0;
            left: auto;
            height: 100vh;
            position: fixed;
        }
        .sidebar-content {
            width: auto;
            padding: 72px;
        }
        .sidebar .menu-title {
            display: none;
        }
    }
    .site-main {
        display: block !important;
    }

    Let me know how it goes!

    Thread Starter thaggles

    (@thaggles)

    Haha, works like magic. You’re a wizard!

    Aw, thanks! 🙂

    You can use the sidebar to mark the thread as resolved when you’re ready!

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

The topic ‘Change Menu Flyout Width’ is closed to new replies.