Add a Topbar Menu with WP Dashboard, Appearance, Menus

Support
#1

Hello,

My Goal:
I need a second menu at the very top of my website. I want it to be responsive and morph into a button for mobile devices.

My Preference:
I want to add a custom menu from the WP Dashboard to the Topbar Menu so it displays my menu when I edit it using WP Dashboard in Appearance > Menus. I understand to do any php edits to Theme X I must use the Child Theme.

My Own Attempt:
I have built it here ( http://www.jaimeluishernandez.com/ ) using bootstrap code I found on W3Schools.com’s website but then realized the links on this menu will not feed from the WP Dashboard > Appearance > Menus when I rearrange and edit the menus there. I will have to manually code the links of the pages and I don’t want to do that. I want the topbar menu to link and work smoothly from the WP Dashboard.

Old Themeco Post:
I found this article on google but I am not sure if this is teaching how to do what I am asking. Also, it is very old and may be outdated. https://theme.co/apex/forums/topic/menu-in-top-bar/

Here is the code on that link (if for some reason it doesn’t link properly):

<?php // ============================================================================= // VIEWS/GLOBAL/_TOPBAR.PHP // ----------------------------------------------------------------------------- // Includes topbar output. // ============================================================================= ?> <?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>
<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>

<?php echo x_get_option( 'x_topbar_content' ); ?>

<?php endif; ?> <?php 
    wp_nav_menu( array(
        'menu'           => 'topbar-menu',
        'container'      => false,
        'menu_class'     => 'x-nav sf-menu',
        'container'       => 'div',
        'container_class' => 'top-menu',
    ) );
  ?>
  <?php x_social_global(); ?>
</div>
<?php endif; ?>

Thank you for your help.

#2

Hi There.

That is not possible with X it could be possible but with custom development that would fall out of the scope of our support.

You can achieve that with PRO using Pro Header Builder.

Hope it helps

#3

How much is Pro Header Builder?

#4

Hi There,

Please take a look at this link: https://theme.co/pro/#pricing.

Regards!

#5

Thank you for the link. An inexpensive price for such a great tool.

1. Question:
I was able to create the topbar menu but it won’t link to my Dashboard so it populates my Topbar Menu I created in Appearance > Menus… will the “Pro Header Builder” do exactly what I am asking for in my original question above. Can PRO connect the Dashboard > Appearance > Menus to the Topbar of Theme X?

2. Question:
Also, what about the code I provided up top. (I placed it below again) Can this code solve my problem on X-Child Theme? What does that code do? It sounds like it is my solution. Why doesn’t it work on the X-Child Theme? Please advise.

Thanks

<?php // ============================================================================= // VIEWS/GLOBAL/_TOPBAR.PHP // ----------------------------------------------------------------------------- // Includes topbar output. // ============================================================================= ?> <?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?> <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?> <?php echo x_get_option( 'x_topbar_content' ); ?> <?php endif; ?> <?php wp_nav_menu( array( 'menu' => 'topbar-menu', 'container' => false, 'menu_class' => 'x-nav sf-menu', 'container' => 'div', 'container_class' => 'top-menu', ) ); ?> <?php x_social_global(); ?> <?php endif; ?>
#6

Hello There,

Thanks for updating in!

1.) Even when using Pro header builder or using the code for the menu, you will still have to set up the menu links manually by linking it to Dashboard > Appearance > Menus. To create a custom menu with custom links, please check this out: https://en.support.wordpress.com/menus/#2-add-menu-items

Once you have created the menu, you can assign the menu it will display in your topbar menu.

2.) Your code is valid and correct. It does not display anything yet because it is missing the topmenu. By default, X has only two menu locations, the primary and and the footer area. If you want to add another one for the topbar, you must register another menu location first. To be able to do that, please check out this tutorial: https://premium.wpmudev.org/blog/add-menus-to-wordpress/

Hope this helps.

#7

I did what you suggested.
It looks like I have assign the menu to display in a topbar?
You said the code is valid and it seems to have worked well.
I did follow the instructions from reply 2. above to accomplish this.

In Theme X, Customizer > Header there is a button that when clicked it shows a topbar section. I turned it off.

In the 2. suggestion above the tutorial eventually says I need to place the code below on the header.php. I did.

<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

But I changed the class to… x-topbar … is this correct?

<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => '**x-topbar**' ) ); ?>

The code above seems to have created a new topbar section apart from the Customizer > Header > Topbar Option. A topbar has appeared there by adding the code above to the header.php. If I click the option in the Customizer > Header > Topbar option, it will add another topbar so this is why I turned it off.

Now, I am missing the correct CSS. The menu that is showing now is coming from the Dashboard > Appearance > Menus. That’s exciting! But like I said, the CSS is not talking to it and it is showing it as bulleted items. The CSS is working to help display some parts of the topbar area. The CSS is not talking to the bulleted text and displaying it like a horizontal menu. And it doe not convert the menu to an icon.

Take a look at my progress here:

I know I am close to completing this. Help, anyone. :slight_smile:

Please advise. Thanks

#8

We’re sorry but this would need custom development. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

You might want to use Pro instead.

Thank you for your understanding.

#9

@RueNel
Please, this is almost done.
I understand Themeco does not do development, that is why I am doing it.
I just need a little advise, that’s all.

It looks like I have assign the menu to display in a topbar?
You said the code is valid and it seems to have worked well.
I did follow the instructions from reply 2. above to accomplish this.

In Theme X, Customizer > Header there is a button that when clicked it shows a topbar section. I turned it off.

In the 2. suggestion above the tutorial eventually says I need to place the code below on the header.php. I did.

<?wp_nav_menu( array( ‘theme_location’ => ‘new-menu’, ‘container_class’ => ‘new_menu_class’ ) ); ?>

But I changed the class to… x-topbar … is this correct?

<?wp_nav_menu( array( ‘theme_location’ => ‘new-menu’, ‘container_class’ => ‘x-topbar’ ) ); ?>

The code above seems to have created a new topbar section apart from the Customizer > Header > Topbar Option. A topbar has appeared there by adding the code above to the header.php. If I click the option in the Customizer > Header > Topbar option, it will add another topbar so this is why I turned it off.

Now, I am missing the correct CSS. The menu that is showing now is coming from the Dashboard > Appearance > Menus. That’s exciting! But like I said, the CSS is not talking to it and it is showing it as bulleted items. The CSS is working to help display some parts of the topbar area. The CSS is not talking to the bulleted text and displaying it like a horizontal menu. And it doe not convert the menu to an icon.

Take a look at my progress here:

I know I am close to completing this. Help, @RueNel . :slight_smile:

Please advise. Thanks

#10

oops, i did’t mean to delete post. please save it. Thanks.

#11

Hi again,

I can’t find your deleted post, can you please re-send it?

Thank you!

#12

I replaced the deleted post.
I have chosen to go a different route.
I was told it could not be done unless I wrote code.
So I did it myself. Thanks!

#13

Glad you’ve sorted it out.

Cheers!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.