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

    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 5 years, 10 months ago by tguarente.
    #1136824

    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

    #1137221

    That works great! Thanks Mike.

    #1137233

    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!

    #1137323

    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

    #1150007
    This reply has been marked as private.
    #1150179

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.