WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [theme: twenty twelve] how to put widget and nav next to each other? (8 posts)

  1. BLuu123
    Member
    Posted 1 year ago #

    Hello,

    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 -

    http://gamingtops.com/wp-content/uploads/2013/02/KTs.png

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. BLuu123
    Member
    Posted 1 year ago #

    Thank you, will try it out.

    Is there an easy fix for spacing between navigation lists?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The margin here:

    .main-navigation li {
        margin: 0 2.85714rem 0 0;
    }
  5. BLuu123
    Member
    Posted 1 year ago #

    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.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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">
            <ul>
               <li><a href='/index.php'>123</a></li>
               <?php wp_list_pages('depth=2&title_li='); ?>
            </ul>
          </div>
  7. BLuu123
    Member
    Posted 1 year ago #

    Yeah, its in child's style.

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

  8. gcoulby
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.