Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1320343


    I would like to add a button and search in the top bar. I’ve looked at a number of posts discussing this subject:


    Here are two methods that I’ve seen:
    1. Use secondary menu – create a menu
    2. Use a shortcode in the phone field in the top bar

    Here is my struggle:

    1. I was able to create a secondary menu and called it a “submit a document”. It lined up perfectly with the rest of the text, but I could not get it show as a button. There is a field that says menu style but I was able to affect any change regardless of option. I saw somewhere that it was possible to add a CSS class to a button, but I don’t see the custom css field being available in the menu item.

    Menus ‹ avisar.wpsitestage 2021-09-10 at 1.00.34 AM.com — WordPress - Google Chrome

    2. I was able to create a button, but I was not able to size it because of the shortcode in the phone field. In addition, adding a button only showed up on the left hand side while I need it on the right. Furthermore, it increased the height of the top bar so that the icons and the vertical bars don’t stretch all the way down.

    avisar.wpsitestage 2021-09-10 at 12.54.36 AM.com – Just another WordPress site - Google Chrome

    I’m okay to implement whatever solution work. I also want it to be future proof (as much as possible) so that if updates happen with the theme, it would not be likely that one needs to come back and make changes again.

    I would love to get some help in getting this implemented and either method is fine.

    With gratitude!

    • This topic was modified 2 years, 7 months ago by slui.

    Hey slui,
    Thank you for your patience, to show the classes field in the menu items you would need to enable it in the screen options:
    So it seems that the menu item next to your social icons was the closest to what you wanted so I added the custom class menu-button-bordered to the item and added this css to your Quick CSS:

    #menu-item-796.menu-button-bordered > a {
    	border: 2px solid;
        border-radius: 2px;
        padding: 7px;

    and now it seems to be working:
    Please clear your browser cache and check, and if you like then remove the other button.

    Best regards,


    Thanks Mike that worked out perfectly.

    The vertical centering is what I’m trying to achieve now with the top bar.
    I followed this and was able to get the button to vertically center.

    This is the issue:

    Blog – avisar.wpsitestage 2021-09-14 at 10.30.26 AM.com - Google Chrome

    • This reply was modified 2 years, 7 months ago by slui.

    Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    #top #header_meta .social_bookmarks,
    #top #header_meta .phone-info.with_nav{
    	margin-top: 4px;

    After applying the css, please clear your browser cache and check.

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.