[Lauren SParticipant]

Hello,

I would like to have 2 navigation bars in my header. Due to the height of my logo, there is a lot of vertical space in the header on the site I’m working on. I am going to have several top-level category links with drop downs, so I would like to have “site navigation” links like “home – cart – contact – FAQs” in a separate menu that appears above the larger “product category menu.”

My concern, however, is how this would affect the responsive aspect of the theme. Would there be a way to accomplish this with CSS so that it’s one navigation menu, but certain links are assigned to a class to make it stack?

Essentially I’d like it to look like this, with the site links being smaller and styled differently, and the Product Category links being larger and more prominent.

(site links)
Home Cart Contact FAQs

(Product Category menu)
Apparel Hats & Headwear Gifts Gadgets and Toys etc…

Thanks!

[Paul RModerator]

Hi Lauren,

Thanks for writing in!

You can add your sitelink in your topbar.

You can enable it under header in the customizer.

http://screencast.com/t/OqhLOeyk0

In the topbar Content you can add something like this.

<ul class="site-links">
   <li><a href="http://yoursite.com">Home</a></li>
   <li><a href="http://yoursite.com/cart">Cart</a></li>
   <li><a href="http://yoursite.com/contact">Contact</a></li>
   <li><a href="http://yoursite.com/faqs">FAQs</a></li>
</ul>

Then you can add something like this under Custom > CSS in the Customizer.

.site-links {
    width:50%;
    float:right;
}

.site-links li {
   display:inline-block;
   vertical-align:middle;
}

.site-links li a { 
    padding:5px 10px;
}

Hope that helps.

[Lauren SParticipant]

Thanks! Would there be a way to add a widget area to the Top Bar so that I could include a menu from wordpress? Or could I insert a wordpress somehow without using a widget? I’m reading this article right now… http://codex.wordpress.org/Navigation_Menus

Any special instructions relating to the X theme I should know about?

[Lauren SParticipant]

I figured it out 🙂 For anyone else who wants to know how to do the same thing, here’s how I did it:

Add this code to your child theme’s functions.php file:

<?php
// Custom widget area.
 register_sidebar( array(
    'name' => __( 'Custom Widget Area'),
    'id' => 'custom-widget-area',
    'description' => __( 'An optional custom widget area for your site', 'twentyten' ),
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => "</li>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

?> 

Note: change the name, id, and description as necessary

Then, add the code below to the _topbar.php file. Copy the file from x/framework/views/global and add the code, then upload it to the same location in your child theme. Be sure to change the widget area name to match what you set in your functions.php file.

<?php
        if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Top Bar Widget Area') ) : ?>
      <?php endif; ?>

You’ll want to use the code above to replace this code in the original _topbar.php file:

      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>

And it works like a charm! So happy 🙂

[RadModerator]

Woah! Nice job Lauren! Thanks for sharing 🙂

[gazellegroupParticipant]

Has this option changed since the release of cornerstone? Every time I try these steps I get the white screen of death until I undo the changes. Thanks!!

[Nabeel AModerator]

Hi Sara,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[gazellegroupParticipant]

Hi there! Sorry for the confusion. I figured I’d add to this post rather than start a new one on a similar topic. But maybe that wasn’t helpful haha :/

I’m trying to have two navigation bars as this poster requests and looks like she now has on her site: (http://www.shwartsdesign.com/shopCDM). But I followed her directions for the functions.php file and it’s not working for me. I’m not sure if it’s because Cornerstone wasn’t around back when this was posted.

I would like the top bar and nav bar to both be fixed.. but I am hoping for the top bar menu to either convert to a mobile menu as the regular nav bar menu does, or at least be responsive. Right now a plain list top bar menu looks crowded and weird on a mobile device.

[NicoModerator]

Hi There,

Would you mind opening a new thread so you could share us your admin credential and FTP that members of staff and you could see that post. We would like to see your setup closer and we could investigate further.

Thank you so much.

[gazellegroupParticipant]

ok! I’m actually in the process of transferring to a new server, so I’ll be back soon. Thanks!

[FriechModerator]

Let us know how it goes, Cheers!

[Author]

Posts