TwentyTwelve Navigation Menu Button?

  • urbannerd

    (@urbannerd)


    12 years ago

    Hello,
    I am working on the site Mixx Shuz and it is a childtheme for twentytwelve.

    Does anyone know how to get rid of the menu change when the browser is reduced in size? When my browser window is maximized, everything looks right on the navigation but when I make the window smaller, my whole navigation disappears, and it becomes drop down button.

    Also if the window becomes smaller, my woocommerce category side bar moves under my image slider, which its suppose to sit next to.

    Is is it possible to remove this menu function, or even better, Is it possible to keep everything on the site in place when the browser becomes smaller and you just need to scroll side to side instead of everything trying to move around?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In your Child Theme style.css file, add this;

    @media screen and (max-width: 480px) {

 .main-small-navigation .menu {
  display: block;
 }

 .site-navigation h1.menu-toggle {
  display: none;
 }

}

    Thread Starter urbannerd

    (@urbannerd)

    no that didnt do anything different :/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does this do any different;

    body {
 border: 10px solid red;
}

    Thread Starter urbannerd

    (@urbannerd)

    it adds a red border around my whole site lol

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add this to your CSS instead;

    @media screen and (max-width: 980px) {

 .main-navigation ul.nav-menu{
  display: inline-block;
 }

 .menu-toggle {
  display: none;
 }

}

    You’ll still have to mess about with some of the styles of the <ul> element in that media query.

    Thread Starter urbannerd

    (@urbannerd)

    yes that helps from showing the button
    now my menu links just stack on top of each other but i guess i can
    figure that out.

    would you happen to know how I can just keep everything in place when the browser window becomes smaller? even the padding on the side of the main content area? When the browser becomes smaller the background disappears and things begin to move around.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    would you happen to know how I can just keep everything in place when the browser window becomes smaller?

    Not worth it mate. You’ll have to redo most of the theme’s CSS because Twenty Twelve was built for mobile phones primarily before desktops.

    I heard you can get away with it by adding a viewport tag in your header.php file, but if that doesn’t work, I suggest switching to a different and non-mobile theme.

    Thread Starter urbannerd

    (@urbannerd)

    about to try this

    wordpress support

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘TwentyTwelve Navigation Menu Button?’ is closed to new replies.