-
AuthorPosts
-
February 25, 2022 at 5:31 pm #1342308
Hi, I have a question about modifying the top bar in Enfold. I have a client that would like a top bar like this site: https://traditionsurgerycenter.com/
The top bar is a bit larger than Enfold’s at 50 px, which they like, and it also has two buttons on the right. Can this be done in Enfold?
February 26, 2022 at 1:57 pm #1342369Hey Eleina_Shinn,
Thanks for your question, you can add html or shortcode in the topbar via the Phone Number or small info text option and the topbar will increase to show the element. For example this is a medium button shortcode created with the shortcode wand[av_button label='Button' icon_select='no' icon='ue800' font='entypo-fontello' link='manually,https://kriesi.at/support/' link_target='_blank' size='medium' position='right' label_display='' title_attr='' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']
Best regards,
MikeMarch 2, 2022 at 5:27 pm #1342880Oh my gosh, I never knew it was that simple, thank you! That worked like a charm…. may I ask you one more question? Since I’ve now used the right side for buttons (instead of phone number).. is there a way to now add the phone number on the left side of the top bar?
March 2, 2022 at 7:29 pm #1342897Hi,
Thanks for the update. You should be able to use the same method as Mike suggested for the phone number. If you need help with styling it, then please post a link to where we can see the actual elements.
Best regards,
RikardMarch 2, 2022 at 10:09 pm #1342920Okay, maybe I wasn’t clear…. I have the buttons on the Right
But now the only options I have to place something on the Left side of the top bar are to display “Social Profiles – “top bar at the left” – or Header Secondary Menu” top bar at the left. There is no space to add exactly what you want like there is underneath for Header Phone Number/Extra Info.
Does that make sense?
March 3, 2022 at 4:12 am #1342940Hi,
You can add a widget inside the header containing the button shortcode instead of using the phone number field. Please check this documentation for more info.
// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
You may need to replace the action hook with avia_meta_header.
Example:
add_action("avia_meta_header", function() { dynamic_sidebar("header"); }, 10);
The code above will render a widget area called “header” inside the top bar.
Best regards,
IsmaelMarch 9, 2022 at 11:57 pm #1343922Okay, I’ve tried this.
First: I placed the phone number on the left in Theme Options, Then I added a Header Widget Area and paced my side by side button code there, but now the buttons are under the Menu.
1. How do I get my buttons to be in the Top Bar on the Right the way there were in this image: https://nimb.ws/M0A1OW ?
- This reply was modified 2 years, 7 months ago by Eleina_Shinn.
March 10, 2022 at 3:27 am #1343934Hi,
Thanks for your patience, perhaps it would be easier to go back to the step were we used a shortcode to add the button to the topbar, so to add a phone number to the left side and the button to the right we assume you are using the setting Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Header Phone Number/Extra Info ▸ Display in top bar at the left and your phone number is in the Phone Number or small info text field.
Now we will add your button wrapped in a span with the class top-right link this:<span class="top-right">[av_button label='Button' icon_select='no' icon='ue800' font='entypo-fontello' link='manually,https://kriesi.at/support/' link_target='_blank' size='medium' position='right' label_display='' title_attr='' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']</span>
#header_meta .phone-info,#header_meta .phone-info > div { width: 100%; } #header_meta .phone-info .top-right { float: right; }
and the result should be like this
Best regards,
MikeMarch 11, 2022 at 12:01 am #1344068Okay, this is awesome, thank you! Could you help with one more thing? Although the buttons look great on the right hand side, now the phone number at the top is tiny and butted up to top, whereas it needs to be centered vertically, just like the buttons, and a little larger. Could you help with that?
Thank you!
March 11, 2022 at 12:59 am #1344074Hi,
Try changing the css to this:#header_meta .phone-info,#header_meta .phone-info > div { width: 100%; line-height: 4em; } } #header_meta .phone-info .top-right { float: right; }
If this doesn’t help then please link to your page so we can examine
Best regards,
MikeMarch 11, 2022 at 4:09 pm #1344151hmmm… doesn’t really work – it adds space to the top bar, more space under buttons, when what we actually need to accomplish is get the phone number moved down – so more space on top of it, no more space at the bottom, because right now the buttons have small amount of space top and bottom, perfect, but if I add this code, there is now a bunch of space added under the buttons, to the entire top bar, which is unnecessary.
Here’s a screenshot: https://nimb.ws/yF6bl2
I really have tried a bunch of things, to no avail.
March 12, 2022 at 12:35 pm #1344200Hi,
Please include admin login in the Private Content area so we can examine, your site is in maintenance mode so we can’t view it.Best regards,
MikeMarch 14, 2022 at 3:50 pm #1344422Here you go Mike, thanks for looking into this.
March 15, 2022 at 1:41 pm #1344565Hi,
Thanks for the login, I added a span around your phone number and this css:#header_meta .phone-info .phone { line-height: 3em; } #top #wrap_all #header_meta .phone-info .top-right .avia-button { margin-bottom: 0; }
please clear your browser cache and check.
Best regards,
MikeMarch 15, 2022 at 2:08 pm #1344566It’s perfect Mike, thank you so much!
Now I’ll know how to accomplish this in the future :)
-
AuthorPosts
- The topic ‘Add Buttons to Top Bar’ is closed to new replies.