Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1248700

    I would like the top bar to always show, whether or not I use transparency for the logo and main navigation. How do I do that?

    #1249321

    Hey phausner,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    #1249405
    This reply has been marked as private.
    #1249454

    Hi phausner,

    I tried. Still the same result.

    Best regards,
    Victoria

    #1249460
    This reply has been marked as private.
    #1250330

    Hi,
    Sorry for the late reply, I was not able to login to your backend, but I was able to test a jQuery script by injecting the script on my end.
    So as I understood your question you would like the topbar to show after scroll, when it is typically hidden.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function show_topbar_after_scroll(){
      ?>
      <script>
    ( function( $ ) {
    
      'use strict';
    
      var $window       = $( window );
      var lastScrollTop = 0;
      var $topbar       = $( '#header_meta' );
      var $header       = $( '#header' );
      var headerBottom  = $topbar.position().top + $topbar.outerHeight( true );
    
      $window.scroll( function() {
              var windowTop  = $window.scrollTop();
    
              // Add custom sticky class 
              if ( windowTop >= headerBottom ) {
                  $topbar.addClass( 'top-sticky' );
              } else {
                  $topbar.removeClass( 'top-sticky' );
                  $topbar.removeClass( 'top-show' );
              }
    
              // Show/hide
              if ( $topbar.hasClass( 'top-sticky' ) ) {
                  if ( windowTop >= headerBottom || windowTop > lastScrollTop ) {
                      $header.addClass( 'top-show' );
                  } else {
                      $header.removeClass( 'top-show' );
                  }
              }
              lastScrollTop = windowTop;
      } );
    } ( jQuery ) );
    </script>
    <?php
    }
    add_action('wp_footer', 'show_topbar_after_scroll');

    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .responsive #top #wrap_all #header.top-show {
          margin-top: 0 !important;
      }
    

    Then clear your browser cache and any cache plugin, and check.
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    #1250657
    This reply has been marked as private.
    #1250822

    Hi,
    Thank you for the feedback, please try this css:

    #top #header.av_header_transparency #header_meta {
        background-color: #349a47 !important;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1251572

    Perfect!! Thank you so much!

    #1251705

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Remove transparency from Header Top Bar when using Header transparency’ is closed to new replies.