Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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?

    #1342369

    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='']

    2022-02-26_002.jpg

    Best regards,
    Mike

    #1342880

    Oh 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?

    #1342897

    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

    #1342920

    Okay, 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?

    #1342940

    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

    #1343922

    Okay, 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.
    #1343934

    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>

    2022-03-09_002.jpg
    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
    2022-03-09_003.jpg

    Best regards,
    Mike

    #1344068

    Okay, 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!

    #1344074

    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

    #1344151

    hmmm… 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.

    #1344200

    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

    #1344422

    Here you go Mike, thanks for looking into this.

    #1344565

    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

    #1344566

    It’s perfect Mike, thank you so much!

    Now I’ll know how to accomplish this in the future :)

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Add Buttons to Top Bar’ is closed to new replies.