Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I use TwentyTwelve as the parent theme for most of my site development.

However, when i change any styling or positioning associated with the menu, the responsive nature of menu does not come into effect on small-screens. Instead, all the menu items are displayed in a vertical list.

What i did:

Created a new child theme Created header.php by copy pasting contents from original header.php file, Created a style.css and added style overrides here.

Then i moved the site-navigation div into hgroup so that i could display menu at top, just after the logo. Tried to add some margins to .main-navigation and the menu does not fallback to responsive layout on small screen.

This is how the menu looks on small screen:

enter image description here

Here is the header.php code:

            <?php
            /**
             * The Header for our theme.
             *
             * Displays all of the <head> section and everything up till <div id="main">
             *
             * @package WordPress
             * @subpackage Twenty_Twelve
             * @since Twenty Twelve 1.0
             */
            ?><!DOCTYPE html>
            <!--[if IE 7]>
            <html class="ie ie7" <?php language_attributes(); ?>>
            <![endif]-->
            <!--[if IE 8]>
            <html class="ie ie8" <?php language_attributes(); ?>>
            <![endif]-->
            <!--[if !(IE 7) | !(IE 8)  ]><!-->
            <html <?php language_attributes(); ?>>
            <!--<![endif]-->
            <head>
            <meta charset="<?php bloginfo( 'charset' ); ?>" />
            <meta name="viewport" content="width=device-width" />
            <title><?php wp_title( '|', true, 'right' ); ?></title>
            <link rel="profile" href="http://gmpg.org/xfn/11" />
            <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
            <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
            <!--[if lt IE 9]>
            <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
            <![endif]-->
            <?php wp_head(); ?>
            </head>

            <body <?php body_class(); ?>>
            <div id="page" class="hfeed site">
                <header id="masthead" class="site-header" role="banner">
                    <hgroup>
                        <nav id="site-navigation" class="main-navigation" role="navigation">
                        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
                        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                        </nav><!-- #site-navigation -->

                        <h1 class="site-title">
                        <a href="http://b2.mumacro.com/" title="Bennys Salon" rel="home">
                        <img class="fplogoimg" src="http://b2.mumacro.com/wp-content/uploads/2013/04/BennysLogoOnlyText.png"></img>
                        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
                        </a>
                        </h1>
                    </hgroup>

                    <?php $header_image = get_header_image();
                    if ( ! empty( $header_image ) ) : ?>
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
                    <?php endif; ?>
                </header><!-- #masthead -->

                <div id="main" class="wrapper">

Style.css:

            /*
            Theme Name:     Bennys Salon
            Description:    Bennys Salon Child Theme
            Author:         MuMacro
            Template:       twentytwelve

            (optional values you can add: Theme URI, Author URI, Version)
            */

            @import url("../twentytwelve/style.css");
            @import url(http://fonts.googleapis.com/css?family=Acme);
            @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700italic);


            /* Fonts */

            .nav-menu{
                font-family: Acme, serif;
                color: #9C3F97;
                text-transform:uppercase;
            }

            .entry-header .entry-title {
                color: black;
                font-size: 1.57143rem;
                font-family: Acme, serif;
            }

            .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
                color: black;
                line-height: 1.71429;
                margin: 0 0 1.71429rem;
            }
            /*Navigation*/
            .main-navigation li a {
                border-bottom: 0 none;
                color: #9C3F97;
                font-size: 13px;
                line-height: 3.69231;
                text-transform: uppercase;
                white-space: nowrap;
            }

            .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
                border-bottom: 0 solid #EDEDED;
                border-top: 0 solid #EDEDED;
                display: inline-block !important;
                margin-left: 28%;
                margin-top: 0;
                text-align: left;
                width: 100%;
            }


            /* Header */
            .site-header h2 {
                color: #9C3F97;
                font-size: 17px;
                font-weight: normal;
                line-height: 1.84615;
                font-style: italic;
                font-family: Acme;
            }
            .site-header h1 {
                font-size: 1.85714rem;
                line-height: 1.84615;
                margin-left: -27px;
            }

            .site-header {
                padding: 1% 0;
            }


            /*Navigation*/
            .main-navigation {
                margin-top: 0.714rem;
                text-align: center;
            }

            /* Content Background */

            .site{
                background: rgba(255,255,255, .5); /* Works on all modern browsers */
            }

            body .site {
                box-shadow: 37px 24px 51px rgba(205, 100, 100, 0.3);
                margin-bottom: 3.42857rem;
                margin-top: 3.42857rem;
                padding: 0 2.85714rem;
            }

            /*Footer Credits*/

            .site-info{
                float:right;
            }

            /* Font Colors */
            .site-header h2 {
                color: #9C3F97;
                font-size: 17px;
                font-style: italic;
                font-weight: normal;
                line-height: 1.84615;
            }

            /* Logo Image */

            .fplogoimg{
                height:130px;
            }

            /* Site Description*/

            .site-description {
                margin-left: 5%;
                position: relative;
            }

            /*Content Margins*/

            .site-content {
                margin: 0;
            }

            .widget-area {
                margin: 0;
            }

            body .site {
                box-shadow: 37px 24px 51px rgba(205, 100, 100, 0.3);
                margin-bottom: 1.429rem;
                margin-top: 1.429rem;
                padding: 0 2.85714rem;
            }

N.B. I am not good into HTML, CSS. I just find ways to hack a solution.

Kindly help.

share|improve this question
    
Note that pure CSS questions are not in scope of this site. Can you provide link to seeing this in action? That would be easier for people to look at than re-creating your child theme. –  Rarst May 30 '13 at 21:41
    
Thanks for your reply, you can have a look at b2.mumacro.com for reference. and also at abs.mumacro.com –  SNaushadS Jun 3 '13 at 16:03
add comment

1 Answer

up vote 0 down vote accepted

Try to edit the line "display:inline-block !important;" to "display:none;" and keep the rest as it is.

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: 0 solid #EDEDED;
    border-top: 0 solid #EDEDED;
    display: none;
    margin-left: 28%;
    margin-top: 0;
    text-align: left;
    width: 100%;
}
share|improve this answer
    
@brasofilo that worked and now i have an awesome responsive menu as ever. Thanks a lot. –  SNaushadS Jul 2 '13 at 18:11
    
@SNaushadS, I'm just one of the editors, click in edited x time ago over my card and you'll see the editing history. This Answer is from user1759911 (answered x time ago) –  brasofilo Jul 2 '13 at 20:09
    
Now i got it, there were 2 edits to make this answer perfect. THanks @user1759911 –  SNaushadS Jul 2 '13 at 20:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.