Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 10, 2020 at 3:15 pm #1172211
    Rio1

    hi enfold team,
    I’d like to add a button to the header area that only showa below 1300 px width.
    my first idea was to do it as a floating button with the following css code but that doesn’t work.
    this doesn’t include the media query

    .button-float {
    position: fixed;
    right: 10%;
    top:200px;
    z-index: 999999 !important;
    }

    do you have a better idea?
    thank you

    January 10, 2020 at 3:36 pm #1172228
    Yigit

    Hi,

    Please refer to this post – https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area and add widget area to your header to display your button.
    Then you can add following code to Quick CSS in Enfold theme options > General Styling to display it only on screens below 1300px

    @media only screen and (min-width: 1300px) {
#header .widget { display: none !important; }}

    Cheers!
    Yigit

    January 30, 2020 at 7:48 pm #1180066
    Rio1

    hi yigit,
    – I added the code to the functions.php
    – added a button to the bottom of the front page (but I want the button to show in the header of all pages) and gave it the id “header”
    – and added this code to the quick css:

    
@media only screen and (min-width: 1300px) {
#header .widget { display: none !important; }}
}

    but it’s not working. what am I doing wrong?

    • This reply was modified 4 years, 10 months ago by Rio1.
    February 2, 2020 at 10:17 pm #1180707
    Rio1

    so I want the same behavior as on this site (the header button shows up, once the menu collapses)
    https://www.savethechildren.de/

    All I really want is a the “Jetzt Spenden” menu button to stay visible when the menu collapses into the burger menu.

    I have added the code to the functinos.php and created a new widget area called header.
    but where do I actually add the button?

    I have added an html area with this code

    <span class="menu-item menu-item-type-post_type menu-item-object-page page_item page-item-940 current_page_item av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-6 current-menu-item"><a href="/spenden/#top" itemprop="url" style=""><span class="avia-menu-text">JETZT SPENDEN</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"></span></span></a></span>

    then I added this to the quick css
    #header .widget{
    left: 15%;
    bottom: 30%;
    }
    @media only screen and (min-width: 1300px) {
    #header .widget { display: none !important; }}

    ho ever I’M not sure if this is the right way.
    also it’s not aligned well. I want it to always be to the right of the logo and at the same height of the logo

    your help is much appreciated

    • This reply was modified 4 years, 10 months ago by Rio1.
    February 5, 2020 at 11:30 am #1181710
    Ismael

    Hi,

    Thank you for the info.

    The Jetzt Spenden button is still visible on mobile view, but its position looks a bit off. Please add this css code to adjust its position in the header.

    @media only screen and (max-width: 767px) {
    #header .widget {
	left: 180px;
	top: -30px;
	position: absolute;
    }
}

    Best regards,
    Ismael

    February 10, 2020 at 9:57 am #1182971
    Rio1

    Hi Ismael,

    thank you!! it works!
    Can you tell me how to gibe it a border-radius?
    the widget code is:

    <span id=”small” class=”menu-item menu-item-type-post_type menu-item-object-page page_item page-item-940 current_page_item av-menu-button av-menu-button-colored menu-item-top-level menu-item-top-level-6 current-menu-item”><span class=”avia-menu-text”>SPENDEN</span><span class=”avia-menu-fx”><span class=”avia-arrow-wrap”></span></span></span>

    and the quick css is:
    @media only screen and (max-width: 1250px) {
    #header .widget {
    left: 160px;
    right 80px;
    top: -30px;
    position: absolute;
    }
    }

    February 11, 2020 at 5:14 am #1183328
    Ismael

    Hi,

    Glad it’s working. You can add this css code to add a border radius to the button.

    #header .widget .menu-item a .avia-menu-text {
	border-radius: 4px;
}

    Thank you for your patience.

    Best regards,
    Ismael

    February 11, 2020 at 10:44 am #1183378
    Rio1

    great thank you! this can be closed now :-)

    February 11, 2020 at 1:13 pm #1183443
    Yigit

    Hi,

    Glad we could help! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘add (floating) button to header area’ is closed to new replies.