Docs

[Paul R]

Hi,

To achieve that, change your topbar content to this.

<img src="http://uveblog.nyc/wp-content/uploads/2016/10/Uve-Blog-Clear-Logo.png" style="max-width: 90px; margin-top:-7px;"><ul class="x-nav"><li class="menu-item"><a href="#"><span>Home</span></a></li>
<li class="menu-item"><a href="#"><span>Health & Fitness</span></a></li>
<li class="menu-item"><a href="#"><span>Technology</span></a></li>
</ul>

Then add this in Custom CSS

.x-topbar .x-nav {
   display:inline-block;
   margin:0;
}
.x-topbar .x-nav .menu-item  {
     display:inline-block;
     list-style-type:none;
     vertical-align:middle; 
     padding:5px 10px;
}
.x-topbar p {
    margin:0;
}

After that, create file _topbar.php in wp-content/themes/x-child/framework/views/global and copy the code below into that file.

<?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 style="float:right;margin-left:20px;"><?php echo get_search_form();?></div>
      <?php x_social_global(); ?>      
    </div>
  </div>

<?php endif; ?>

Hope that helps.

[johnpromotes]

hello there, I’ve installed a child theme and have read through most of the instructions on how to make edits.. this might be silly, but I am having a tough time seeing where exactly I make the changes for the last step. In Best Practices you guys explain Views and where to find different sections, but I am not sure where to actually make the changes to the code and create the file as you suggest in step 3. “After that, create file _topbar.php in wp-content/themes/x-child/framework/views/global and copy the code below into that file.”

where would create this file? thanks again!

[Jade]

Hi there,

You will have to login through FTP and go to the your wordpress installation directory’s theme directory. That is in wp-content/themes/x/framework/views/global then you will see the file _topbar.php there. Copy the file and place it in wp-content/themes/x-child/framework/views/global.

Hope this makes sense.

[johnpromotes]

Hello there, I was able to log into my FTP account and copied and pasted the code. I can see that the search box is now there to the right and it worked. However, the top bar menu options and social media links are not aligned and they links for them are not working. Also, how do I now get rid of the x-navbar all together? Keep in mind, I wanted the x-navbar to be inside and aligned with x-topbar

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-topbar .x-nav {
    margin-left: 8%;
}

Hope it helps

Joao

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-topbar .x-nav {
    margin-left: 8%;
}

You need to add your URLs at Appereance > Customizer > Topbar Content in order that the links work.

Hope it helps

Joao

[johnpromotes]

This reply has been marked as private.

[johnpromotes]

This reply has been marked as private.

[johnpromotes]

This reply has been marked as private.

[Rad]

Hi there,

That is a complex one since navbar and topbar are the different groups of the header section. You have two menu which isn’t the same as your provided screenshots. The structure is completely different from the samples that you provided, and they will not fit on mobile.

But first, let’s fix the CSS issue, please remove this code from your custom CSS.

jQuery( function($) {

$('.vc_tta-tab a').on('click', function( e ){

setTimeout( function() { 
$('html, body').stop().stop();
}, 100 );

});

$(document).ready(function() {
    $('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
});
});

That is not a CSS, but javascript.

Then find this CSS and add a closing bracket for @media block.

@media (max-width: 767px) {
.x-topbar .x-social-global {
    position:absolute;
    right:0;
    width:130px;
}

.x-topbar .x-social-global a {
    margin:0 5px;
}

.x-btn-navbar {
    margin-top: 5px;
  color: rgb(0,0,0);
}

.x-topbar .x-social-global a:last-child {
    margin-right:0;
}

.h-feature-headline span {
    padding-left: 0;
}
  
.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 80px;
    color: #000000;
}

.x-btn-navbar:hover, .x-btn-navbar.collapsedHover {
    font-size: 80px;
    color: grey;
  color: black;
}
  

Like this,

@media (max-width: 767px) {
.x-topbar .x-social-global {
    position:absolute;
    right:0;
    width:130px;
}

.x-topbar .x-social-global a {
    margin:0 5px;
}

.x-btn-navbar {
    margin-top: 5px;
  color: rgb(0,0,0);
}

.x-topbar .x-social-global a:last-child {
    margin-right:0;
}

.h-feature-headline span {
    padding-left: 0;
}
  
.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 80px;
    color: #000000;
}

.x-btn-navbar:hover, .x-btn-navbar.collapsedHover {
    font-size: 80px;
    color: grey;
  color: black;
}
  
}

Once everything is fixed together again then I’ll continue checking 🙂

Thanks!

[johnpromotes]

Hello there,

ok I’ve made the corrections to the CSS, thank you again for all of your help. What’s next?

[johnpromotes]

This reply has been marked as private.

[Rad]

Hi there,

I understand, but the structure of X theme is different from your provided samples. In your sample, the logo, menu, subscribe are placed in one area only, and when displayed on mobile, the display switches to the different look. And X theme has no capability like that. I tried but not successful, your site’s current structure is really different from what you wish to achieve.

But let’s try it bit by bit, what’s the difference between top bar menu and navbar menu? Should the top bar menu replace by the menu from the navbar? But it’s too long. Which is why I like to see a mockup design based on your current site and not from the sample sites. Then from that, maybe you can add further styling to make it more look like the sample sites.

Thanks!

[johnpromotes]

This reply has been marked as private.

[Nabeel A]

Hi again,

1. Did you mean vertically centered? To do this you can add the following code in your Customizer:

.x-navbar .desktop .x-nav > li > a {
    padding-top: 33px !important;
}

2. To get rid of hover color, use this code:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none !important;
}

3. To change the color of sub menu items:

.x-navbar .desktop .sub-menu a:hover {
    color: #666 !important;
}

4. To show social icons on the side of the site while scrolling, you can use a third party plugin for this e.g you can try out https://wordpress.org/plugins/addthis/

Hope this helps!

[Author]

Posts