Show Logo After Bar Sticked

Support
#1

Hi,

I created a header with header builder. I added two logo one is at top and one is inside sticky bar. I want hide logo inside of sticky bar while scroll down till bar sticked. After bar sticked I will appear. The page is I enabled this header https://www.soruncozumu.com/iletisim/

#2

Hey @SeLoRe,

Please add this code in your Header CSS.

.hm7.x-image {
    opacity: 0;
    transition: all 0.2s;
}
.x-bar-fixed .hm7.x-image {
    opacity: 1;
}

For a more stable solution, it would be best to replace .hm7 with your own class.

Thanks.

#3

It worked thank you. This is different subject but also I want display my navbar menu in the middle before stick, after sticked I want display logo on the left and menu on the right. Is this possible ?

#4

Hello,

Please add this code to header CSS

.hm6.x-bar-container {
display:  none;
opacity: 0;
transition: 0.5s linear;
}

.hm5.x-bar-content {
display:  flex;
justify-content: center;
align-items: center;
}

.x-bar-fixed .hm6.x-bar-container {
opacity: 1;
display: flex;
}

.x-bar-fixed .hm5.x-bar-content {
justify-content: space-between;
}

Hope that’ll work for You.

Best regards.

#5

It worked like a charm, thank you so much all.

#6

You’re most welcome…

#7

Hello, I need the same than SeLoRe, but the provided .css has no effect. Probably it has to be adapted to the stack I use? I’ll send URL via Secure-Note.

Best regards

Uli

#8

Hey @ULinn,

Thanks for writing in. Regretfully, this is not possible with X which is the one you’re using.

#9

Really? A brandnew Theme that has styling options with “virtually no boundaries” (as written on your website) can’t do such a simple thing than shrinking a logo while scrolling down? No way???

#10

Hi Uli,

You’ve to insert a logo in X > Launch > Options > Header. Then try the CSS above.

Please let us know how it goes.

Best regards.

#11

Hi Bappi, that’s exactly what I did - no effect. I did add the css to the global-css via the Icon in the left bar. Or is there any way to add it to the header?
Best Regards
Uli

#12

Hi Uli,

The OP of this thread is using Pro which has a header builder which makes this easier to implement,

What this means it that there are options available out of the box in the theme and you are able to add your own customization by the use of a child theme. It doesn’t necessarily mean that things are achievable in a few clicks and a few CSS code as it depends on your setup.

You are using X and there are two header layouts available. You are currently using a Stacked header which is the logo is above the main menu and since you are using the a fixed navigation, only the navigation area or the menu area sticks at the top of the page.

If you aim to have the logo on the left and the menu on the right in the sticky header area, you will have to override the header template file using the child theme.

You will have to override the _navbar.php and add the customization there. To get you started, you will have to install and activate the child theme.

Once you have activated the child theme, login through FTP and go to wp-content/themes/x-child then create the following directory path framework/legacy/cranium/headers/views/global then add the file _navbar.php and add this code in the file:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>    
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_social_global(); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Then add this code in the custom CSS panel:

.x-navbar .x-brand {
    display: none;
}

.x-navbar-fixed-top .x-brand {
    display: block;
    float: left;
}

.x-navbar-fixed-top 
 .desktop .x-nav {
    float: right;
}

This should display the logo on the left of the menu when you scroll down the page but you might need to add a bit more CSS to achieve better styling for the header.

Hope this gets you started.

Cheers!

#13

Thank you, Jade, that seems to work.
Best regards
Uli

#14

You’re most welcome, Uli.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.