Sridhar Katakam

Genesis and WordPress Tutorials

How to add a widgeted area in Navigation bar in Genesis

by 66 Comments

Update on Sunday, December 29, 2013: See http://www.sridharkatakam.com/adding-simple-social-icons-navigation-bar-genesis/

In this article I want to document the code to add a right floating widgeted area in Primary Navigation in Genesis. One of the most common uses for this sidebar would be displaying social media icons using a plugin's widget.

Screen Shot 2013-08-27 at 4.03.25 PM

Step 1

Install and activate Genesis Simple Sidebars plugin. Go to Genesis > Simple Sidebars and create a new sidebar called say, Social Menu.

Step 2

Add the following code in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • How would the code be different to ONLY show when the dropdown menu is called for?

    ie on my developing site, http://commerce.tradiewebsitedesign.com.au/, when the dropdown menu is called for in the 6th media query (mobile), I want the social media icons to appear to the right of the Hamburger navigation ( and I’ll hide header-right ones).

    How do I target the dropdown navigation 1?

    Thanks!

    Reply

  • Perfect, easy solution. I already had created various sidebars in my functions.php, so I added the new one that way rather than adding another plugin.

    Reply

  • Hi Sridhar,

    Thanks for the tutorial, it’s almost giving me what I need. My only problem is that the icons appear below the nav menu items. For .menu-primary .socialmedia-buttons a { I changed {float: left} to {float: right}, and the icons moved to the right side of the nav bar, but are still on a row below the nav items. Any idea what may be causing this?

    Thanks!

    Reply

    • Brian,

      In the Agency Pro theme, the Primary Navigation menu area is not used in the demo. Are you using the Secondary Navigation Menu? Do you want to add social icons in the Header menu?

      Reply

      • Hey Sridhar,
        That’s what I’m trying to accomplish. I use the Simple Social Icons plugin that Genesis recommends for Agency Pro.

        Reply

      • The navigation is through the widget area called “header right”. I want to add this too to Agency Pro, but I’d like it to be w/ the fixed navigation. What do we need to edit for this to work in Agency Pro?

        Reply

  • Thank you so much for this tutorial!!! I created the widget area to put my search bar in. The problem I have is it is not on the right side of the navigation but below. Could you tell me if I missed a step or need to add something? Thanks 🙂

    Reply

  • Hi Sridhar,
    Is there a way to add a widgeted area like this one in case of using the Minimum Pro theme?
    In Minimum Pro the main navigation is in a custom menu widget displayed in the header right widget. I would like to add there a right floating widgeted area for ‘language flags’, just like you describe here for the social icons.
    Hope you can help, thanks in advance!

    Reply

  • Hello Sridhar. Great tutorial. I have a question – how would you go about placing this before the beginning of nav element, but still within the

    Reply

    • My post was chopped off. So I would like to have the widget added before the menu ul but after the div with id nav. Make sense? That way in responsive mode I can get the widget area to appear on top of navigation.

      Reply

          • In your example, the ul is within the widget area. In my example, the ul is outside the widget area. I need the widget area before the ul so that I can move that section above the navigation in a responsive layout. Make sense?

          • I was able to create my desired effect by simply moving the position of ob_start();

            genesis_register_sidebar( array(
            ‘id’ => ‘donate_button’,
            ‘name’ => __( ‘Nav Right’, ‘genesis-sample’ ),
            ‘description’ => __( ‘This is after .menu in .nav-primary’, ‘genesis-sample’ ),
            ) );

            add_filter( ‘genesis_do_nav’, ‘donate_widget’, 10, 2 );
            function donate_widget( $nav_output, $nav ){
            genesis_widget_area( ‘donate_button’, array(
            ‘before’ => ”,
            ) );
            ob_start();
            $widget_area = ob_get_clean();
            return str_replace( $nav, $nav . $widget_area, $nav_output );
            }

  • Followed your steps very carefully, several times, but I cannot get the buttons to align side-by-side when using Genesis Dynamik. Buttons appear one under the other, with the first button in Nav area. Where exactly does the CSS need to be put within the front-end CSS builder elements, please? I cannot see or find the option within elements to apply CSS to the Social Menu sidebar created with Simple Sidebars.

    Many thanks for your help on this

    Reply

  • I’m using the StudioPress created Simple Social Icons plugins instead for this site, but as in some of the above commentary, nothing I do to style the page keeps the buttons from going under the nav. This happens regardless of whether I choose to add a search form to the nav or not. I assume this is because the Beautiful theme has a default float left for whatever extra content might be added to the nav using the Genesis theme? But not sure. Any thoughts?

    Reply

  • Hey Sridhar! Your articles have SAVED my life many times since I began my WP journey (just a few months ago). So thank you for that!

    Now while I followed all these instructions carefully, when I placed a Search Bar and icons from my Simple Social Icons plugin in my new widget area (thanks for this!), both appear centered and underneath each other; the Bar also expands to the full width of the Menu : /. Any tips so that I can make just that bar smaller and appears flush right? (I don’t need the icons–just the bar for now.)

    (My site is http://therantinglatina.com)

    Thanks so much in advance!!

    Reply

    • If all you want is to add a search bar in the Primary nav, then there is no need to add any code from this article. Just go to Genesis > Theme Settings > Navigation and set Search form to be shown in the Primary Navigation Extras.

      Reply

  • Hi Sridhar. Your article was just what I was looking for – thanks!

    I’ve been able to place several of the Social Media Widget icons at the right of the menu. But then I ran into problems trying to add a Feedburner form link too – using custom services. I realize that the Social Media Widget isn’t your plugin, you were just adding the Social Menu wrapper widget. I don’t know if what I want is possible within that Widget (adding custom HTML), but i tried adding Custom Text widgets into the Social Menu, and couldn’t get them placed right.

    But in the process of trying to figure out what was causing the problem, I noticed what appears to be a problem with your widget – or perhaps with the Social Media Widget. I’m not a great coder, so I can’t be sure.where the issue is.

    What I see is a start generated by your widget, then the code from the Social Media Widget. Then, instead of code from the Custom Text widget, there is a closing . So the Custom Text doesn’t show up in the right place, or with the right style. Does this make sense? Or have I set up something wrong?

    I’m using Genesis Prose with the menu in the secondary location. It’s only visible on LAN right now.

    Here’s the code:



    Thanks
    Mike

    Reply

  • Hi Sridhar, I have added a Style sheet switcher to my nav bar, and following your direction all looks really good.

    How do I make it responsive, at 768px and 320px width I would like the widget area to center.

    Regards and respect

    Mark

    Reply

  • WOW, thank you, Sridhar! This was so helpful and exactly what I needed! I appreciate that you took the time to share this. It helped me a lot!

    Reply

  • Hi – does this still work with the most recent release of WP/Genesis? I have followed the directions for Dynamik and the new widget is not appearing for me to be able to use it.

    Reply

  • I want to add the SEARCH form as if it were just another page or customized item in appearance/menus that is checked and placed at bottom of primary nav menu that appears on the far left of menu as last men item. It would, like all the other menu items take on the CSS for the nagivation area.

    Everything I’ve seen shoves a whole new div in that adds a completely new row in which the search bar appears below the nav bar.

    That said, I am not sure how to customize the above for adding SEARCH to the menu bar.

    Reply
    • >