Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 25, 2024 at 2:33 pm #1458639
    woogie07

    Hi,

    I need to add a button & link in my header (on the right under the social icons).

    See Private content.

    Is there a facility for this in the theme or CSS?

    Or is it easier to put after the Navigation

    Thanks

    June 25, 2024 at 8:35 pm #1458742
    Rikard

    Hey woogie07,

    You can add extra content in a widget: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Rikard

    June 26, 2024 at 10:35 pm #1459791
    woogie07

    I see the documentation on adding a widget.

    I do not see specifics about adding under social icons?

    Thanks

    June 27, 2024 at 5:16 am #1459811
    Ismael

    Hi,

    Or is it easier to put after the Navigation

    There is no default option for this, so you’ll need to make a few modifications to place it below the social icons. We recommend adding the link as part of the navigation or main menu instead.

    Best regards,
    Ismael

    June 27, 2024 at 9:59 am #1459846
    woogie07

    I tried the link as part of the navigation/main menu but the client wants the button to sit under the social icons on the right (see link in private).

    Can you help /advise please?
    I can give login access if it helps.

    June 27, 2024 at 11:12 am #1459852
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    #menu-item-1510 {
  position: absolute;
  right: -234px;
  top: 33px;
}

    Best regards,
    Rikard

    June 29, 2024 at 11:13 am #1460040
    woogie07

    that worked, thanks

    June 29, 2024 at 11:17 am #1460043
    Rikard

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    June 29, 2024 at 5:17 pm #1460179
    Guenni007

    well the hook : ava_main_header is just under the header_meta – it is the first child inside header_main.
    Position is perfect. The rest is styling and positioning.

    you can create a widget area there – or insert directly just your button:
    f.e.: 

    function custom_func() {
?>
<div class="spezial"><div class="avia-button-wrap avia-button-right"><a href="#" class="avia-button av-link-btn avia-icon_select-yes-left-icon avia-size-medium avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="fontelico"></span><span class="avia_iconbox_title">call to action …</span></a></div></div>
<?php
}
add_action('ava_main_header' , 'custom_func');
    June 29, 2024 at 7:08 pm #1460255
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    November 24, 2024 at 11:23 am #1472060
    woogie07

    Hi

    As per the earlier reply from Rikard, the below code seemed to work fine for waht I required.

    #menu-item-1510 {
    position: absolute;
    right: -234px;
    top: 33px;
    }

    However, I have had a comment back that the button is cut off when viewing on certain devices/screen sizes on Chrome (see screen capture in private).

    It display fine for me on Chrome, but let me know if anything needs tweaking in the CSS

    Thanks

    November 24, 2024 at 1:47 pm #1472066
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 767px) and (max-width: 1487px) { 
#avia-menu #menu-item-1510 {
	right: -167px;
}
#avia-menu #menu-item-1510 .avia-menu-text {
	font-size: 10px;
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 25, 2024 at 10:11 am #1472124
    woogie07

    That seems to have worked

    Thank you

    November 25, 2024 at 2:12 pm #1472145
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Add button into header under Social Icons’ is closed to new replies.