Add Buttons to Top Bar

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

Hi,

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,
Rikard

Hi,

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,
Ismael

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

Now we will use this css

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

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

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

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