Support » Themes and Templates » [theme: twenty twelve] how to put widget and nav next to each other?

  • Resolved BLuu123



    I’m using 2012 as a parent theme and creating a custom child theme.

    How do I put Widget area next to navigation menu? I already made the width of nav menu less than 100%. Basically I cannot find where do I setup where the widget area starts?

    Also, how do I make the menu’s items have less spacing between them?

    Take a look at this screenshot –

Viewing 7 replies - 1 through 7 (of 7 total)
  • WPyogi


    Forum Moderator

    There’s not an easy “good code” way to do that – because of the structure of the HTML code of the theme — the sidebar is in a separate section of the page completely. But you might be able to use a negative top margin on the sidebar to move it up next to the navigation. Whether that’s possible or how it would affect the responsiveness, dunno, but you could try it and see.

    Thank you, will try it out.

    Is there an easy fix for spacing between navigation lists?



    Forum Moderator

    The margin here:

    .main-navigation li {
        margin: 0 2.85714rem 0 0;

    Thanks for your reply.

    I tried posting that code in multiple places and ways, no success.

    I have an image as background, maybe there is a different way then? Also, I did made sure there is no obvious errors in the image (such as white spaces).

    As for the negative margin for widgets, it worked perfectly. Very clever solution, thanks.



    Forum Moderator

    Did you change the margin in there? It should go in the child style.css file.

    Why is this in that CSS file? It’s likely messing things up:

    <div id="menu">
               <li><a href='/index.php'>123</a></li>
               <?php wp_list_pages('depth=2&title_li='); ?>

    Yeah, its in child’s style.

    And yep, that was messing things up, solved now, thank you.

    Just a suggestion but you could try creating a whole new widget for the navbar you can name it what you want and it will not loose functionality of one of your widgets

    first in your child-themes functions.php add this

    register_sidebar( array(
    		'name' => __( 'Nav Bar widget', 'twentytwelve' ),
    		'id' => 'sidebar-4',
    		'description' => __( 'Appears in navigation bar', 'twentytwelve' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => '</aside>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );

    (place it anywhere you like just make sure it’s inside your php markup)

    next add this piece of code where you like.

    <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    		<div id="secondary" class="widget-area" role="complementary">
    			<?php dynamic_sidebar( 'sidebar-4' ); ?>
    		</div><!-- #secondary -->
    	<?php endif; ?>

    I’m sure you’ll need to place it inside header.php and inside the nav div. then you will need to style it. (you may also need to change its id and class to make it more stylable.)

    this is untested – i’m just sure it will work even if it is with a few tweaks

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[theme: twenty twelve] how to put widget and nav next to each other?’ is closed to new replies.