Docs

[kramer5789]

Hello,

I don’t know if this would be in the realm of your support but I wanted to know if you could help me customize my header for my page. I have created something of a demo of what I am trying to accomplish. When they click on any of the three items it will drop down with a list.

Also, when you scroll down the header will be compressed into a smaller header. I am trying to imitate something like the look and feeling of this site -> techcrunch.com

Please find the attached mockup of what I have so far.

Ryan

[Rad]

Hi there,

Thanks for writing in.

There are available threads here in the forum that has similar topic, like these,

https://community.theme.co/forums/topic/resize-navbar-top-height-when-scrolling-down/
https://community.theme.co/forums/topic/smaller-navbar-on-scroll/

Though, getting the same/similar navbar from techcrunch.com is only possible with custom development. You may want to contact a developer 🙂

Thanks!

[kramer5789]

I appreciate the help.

Well here is what I am thinking about and maybe I am going in the right direction. So if was creating this myself outside of X I would define multiple divs broken down into sections. So to accomplish this in X how do I define a picture of the beer cup and then another picture of the text “leftoverbeer.com” and so on for each div section while maintaining this in the header/nav area.

Ryan

[Christopher]

Hi there,

Please resize your logo and select inline layout under Customize -> Header.
Enable topbar and add leftoverbeer.com text there. Add Social media URLs under Customize -> Social, they will be added in topbar automatically.

Hope that helps.

[kramer5789]

I tried doing these and it looks like it has some of the feeling but still not quite there.

How do I get all of these elements to be inside a single div? They currently seem to be there own sections and stacked on one another.

Ryan

[John Ezra]

Hi there,

Thanks for updating the thread! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[kramer5789]

This reply has been marked as private.

[Christopher]

Hi there,

Sorry it didn’t work for you.

Copy _topbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
         <div class="x-section">
            <div class="x-column x-1-3 x-sm"><a href="http://www.leftoverbeer.com/" class="" title="Catch up on today's news!">
  <img src="//www.leftoverbeer.com/wp-content/uploads/2016/06/JustBeer.png" alt="Catch up on today's news!"></a></div>
            <div class="x-column x-1-3 x-sm">LeftOverBeer.com</div>
            <div class="x-column x-1-3 x-sm"><?php x_social_global(); ?></div>
          </div>
    </div>
  </div>

<?php endif; ?>

Remove duplicated content from topbar area.

Hope it helps.

[kramer5789]

I made a few changes to this and have something like the following:

<?php do_action( 'x_before_site_begin' ); ?>

  <div id="top" class="site">

  <?php do_action( 'x_after_site_begin' ); ?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
         <div class="x-section">
            <div class="x-column header-picture"><a href="http://www.leftoverbeer.com/" class="" title="Catch up on today's news!">
  <img src="//www.leftoverbeer.com/wp-content/uploads/2016/06/JustBeer.png" alt="Catch up on today's news!"></a></div>
            <div class="x-column header-text" >LeftOverBeer.com</div>
            <div class="x-column header-social"> Follow Us <?php x_social_global(); ?></div>
          </div>
    </div>
  </div>

<?php endif; ?>

I have also been messing with the css to get it to change sizes based upon display. What I am trying to do now is control the div sections using the customized bootstrap you have. So What I think I need to do now is add a class to the div and then reference that div within my css property but I am not sure exactly how to do this. Do you have any examples?

Here is where I am currently at for one of my sections.

@media screen and (max-width: 1199px){
  .x-topbar{
    background-color:red;
  }
  
  .header-picture{
    max-width:100%;
  }
}  

[Rue Nel]

Hello There,

Thanks for the updates! Regretfully we do not have any reference where you can find all the css property. For the meantime, please check out out knowledge base here:
https://community.theme.co/kb/
https://community.theme.co/kb/css-class-index/
https://community.theme.co/kb/customization-best-practices/

Maybe you can use the css class for the column width like x-1-1 ( one full column) or x-1-2 (one half column). You can have up to 6 columns. These are the available column width classes:

x-1-1
x-1-2
x-1-3
x-2-3
x-1-4
x-3-4
x-1-5
x-2-5
x-3-5
x-4-5
x-1-6
x-5-6

You can have a 1/6 + 3/6 (1/2) + 2/6 (1/3) columns and the html code might be something like this:

<div class="x-section">
	<div class="x-column header-picture x-1-6"><a href="http://www.leftoverbeer.com/" class="" title="Catch up on today's news!">
		<img src="//www.leftoverbeer.com/wp-content/uploads/2016/06/JustBeer.png" alt="Catch up on today's news!"></a>
	</div>
	
	<div class="x-column header-text x-1-2">LeftOverBeer.com</div>
	
	<div class="x-column header-social  x-1-3"> Follow Us <?php x_social_global(); ?></div>
</div>

As this is all custom development, we cannot further support any modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[kramer5789]

All,

Thank you so much for getting me in the right direction. I was able to get the rest of it figured out thanks to your guys help.

Ryan

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts