Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 10, 2021 at 7:02 am #1320343
    slui

    Hi,

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

    https://kriesi.at/support/topic/how-to-add-a-search-bar-in-the-top-header-area/

    Adding a Button next to Phone Number in top bar

    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 3 years, 3 months ago by slui.
    September 11, 2021 at 10:59 pm #1320540
    Mike

    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:
    2021-09-11_006.png
    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:
    2021-09-11_007.png
    Please clear your browser cache and check, and if you like then remove the other button.

    Best regards,
    Mike

    September 14, 2021 at 4:33 pm #1320933
    slui

    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.

    Top bar text align vertical Enfold 4.5

    This is the issue:

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

    • This reply was modified 3 years, 3 months ago by slui.
    September 15, 2021 at 12:06 pm #1321025
    Mike

    Hi,
    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,
    Mike

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