Change Menu Flyout Width

  • Resolved thaggles

    (@thaggles)


    9 years, 3 months ago

    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)
  • Chad Chadbourne

    (@shireling)

    9 years, 3 months ago

    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 🙂

    EmithNim

    (@thimemin)

    9 years, 3 months ago

    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

    Chad Chadbourne

    (@shireling)

    9 years, 3 months ago

    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)

    9 years, 3 months ago

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

    Chad Chadbourne

    (@shireling)

    9 years, 3 months ago

    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.