Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 10, 2019 at 7:40 pm #1136733

    tguarente
    Participant

    Hi there,

    I currently have a centered logo, menu below. Sticky, Shrinking, unstick

    I also have social icons in the main header area RIGHT, and phone in the top bar LEFT. I would like to have the phone in header left, so that it balanced vertically with the social icons on the right, inline with logo, and phone. Also want phone in large font but I have that css already.

    I’ve tried a couple of approaches to this but not getting what I want. Or it could be put phone top left, socialj top right and then do some neg margins but couldn’t get that correct across devices.

    • This topic was modified 4 months, 2 weeks ago by  tguarente.
    September 10, 2019 at 10:59 pm #1136824

    Mike
    Moderator

    Hey tguarente,
    Thanks for the link, I wrote a script to move your phone number down into the header inline with the social links, but on the left for tablet and desktop, and allow the phone number to be in the topbar for mobile.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    
function custom_gdutah_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  	var width = $(window).width(); 
      if (width >= 665) {
$( '.phone-info' ).insertAfter('.container.av-logo-container span:first');
	} else {
	}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_gdutah_script');

    and add this css into the Quick CSS:

    .html_bottom_nav_header #top .av-logo-container .phone-info {
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

    Then clear your browser cache and check.
    Please see the screenshots in Private Content area.

    Best regards,
    Mike

    September 11, 2019 at 7:28 pm #1137221

    tguarente
    Participant

    That works great! Thanks Mike.

    September 11, 2019 at 8:29 pm #1137233

    tguarente
    Participant

    Is it possible to add an animation or fade in for this element. I see that animations are possible with some things in enfold. Is there a tutorial or doc that explains more on how to do this using libraries in enfold.

    Thanks!

    September 12, 2019 at 2:58 am #1137323

    Mike
    Moderator

    Hi,
    Sorry this element doesn’t have a fade-in option. But you could try this css:

    .phone-info {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
  }

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

    Best regards,
    Mike

    October 22, 2019 at 12:46 am #1150007

    tguarente
    Participant
    This reply has been marked as private.
    October 22, 2019 at 1:19 pm #1150179

    Mike
    Moderator

    Hi,
    I checked your page on my mobile device and it is looking correct for me, Please see the screenshot in Private Content area.
    Are you checking from a desktop device and resizing the window? If you are please refresh the screen after resizing, this is a common event but should be fine because an actual device doesn’t change the screen size like this, it is loaded as the actual screen width.
    I hope I explained this well.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.