Docs

[Suzanne S]

Hi,

I had my topbar and navbar fixed on larger screens but not on mobile but this code pushes the content up.

@media only screen and (min-width: 980px) {
header.masthead.masthead-inline {
position: fixed !important;
display: block !important;
width: 100% !important;
z-index: 999 !important;
}

Also how do I remove top space from my blogroll the top is correct but 2nd plus need adjusting. It is the same for category and tag blogroll.

thank you
Suzanne
https://howtostartworkingathome.com/articles/

[Lely]

Hello Suzanne,

Try this instead:

@media (max-width: 979px){
.x-navbar{
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
}
.x-navbar-wrap {
    height: 120px;
}
}

For the spacing on blog index, please try adding the following CSS:

.blog .hentry,
.category .hentry {
    margin-top: 20px; /*Adjust this accordingly*/
}
.blog .hentry:first-child,
.category .hentry:first-child {
    margin-top: 0;
}

Hope this helps.

[Suzanne S]

Hi the first piece of code does nothing…I would like the topbar fixed to the header and to remain fixed on desktop devices but not on mobile.

The second piece of code works perfectly, thank you.

[Thai]

You can try with this CSS:

@media only screen and (min-width: 980px) {
    header.masthead.masthead-inline {
        position: fixed !important;
        display: block !important;
        width: 100% !important;
        z-index: 999 !important;
    }
    header.x-header-landmark {
        margin-top: 166px;
    }
}

Hope it helps 🙂

[Suzanne S]

Hi,

that doesn’t work, it messes my site up.

[Thai]

Hi There,

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 login to your site
– WordPress Admin username / password

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

Thanks.

[Suzanne S]

This reply has been marked as private.

[Paul R]

Hi,

You can try this code instead.

@media only screen and (min-width: 980px) {
.masthead {
    min-height:166px;
}
.x-topbar,
.x-navbar {
    position: fixed;    
    width: 100%;
}

.x-topbar {   
    top: 0;
}

.x-navbar  {
    top: 46px;
}
}

Hope that helps.

[Joao]

Hi There,

What you mean by it messes your site? I have tested the code provided by Thai and it seems to work and regarding the layout I did not note any changes.

Please try again also clean your browser cache and let us know how it goes,

Joao

[Suzanne S]

Hi,

the 2nd code works in the customizer view but when you save and publish the topbar is pushed up off screen and there’s a white gap under the navbar.

the 1st code keeps the topbar and navbar in place but pushes the content container up behind the navbar.

I hope this makes sense.

Suzanne

[Nabeel A]

Hi again,

You’ve an invalid Javascript code in your Customizer Appearance > Customize > Custom > Edit Global Javascript, remove it first and add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Then replace the previous CSS codes with this one:

@media only screen and (min-width: 980px) {
.x-topbar,
.x-navbar {
    position: fixed;    
    width: 100%;
}
.x-navbar {
    margin-top : 46px;
}
}

Let us know how this goes!

[Suzanne S]

I cannot find the Javascript code you pasted above, just the code below?

<div id=”fb-root”></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5&appId=1016719695075274”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

[Friech]

Hi There,

Actually that is the first code on the browser console that is giving the error. You can not place that code on the Customizer JavaScript because of this line:

<div id="fb-root"></div>

That is not a JavaScript.

Please follow this post on how to add the Facebook SDK on child theme’s functions.php file instead.

Regarding your topbar; so you want the topbar to be fixed together with the navbar? Lets try a different approach. Please disregard the other custom CSS given above, and add this instead.

.masthead > .x-topbar {display: none !important;}

Then on your child theme, navigate to this directory: /x-child/framework/views/global/ there create a file named _navbar.php and paste the code below on it.

<?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', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

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

<?php endif; ?>

Let us know how it goes.

Cheers!

[Suzanne S]

I have removed the facebook code. I am now worried that I can’t find the first error code! How do I find it?
How can I check all code for errors? I have been updating all my site and cleaning it up so your advice would be really helpful.

Also I tried the code and the _navbar.php this pushes the titles and breadcrumbs up behind the header.

Maybe I just need to concentrate on making sure all code and javascript is correct on the site.

[Friech]

Hi There,

To see the error that we are referring to, when you’re viewing the page press F12 and look for the console panel, you should see the errors.

And now this block is throwing the error:

<script type="text/javascript">
(function (tos) {
  window.setInterval(function () {
    tos = (function (t) {
      return t[0] == 50 ? (parseInt(t[1]) + 1) + ':00' : (t[1] || '0') + ':' + (parseInt(t[0]) + 10);
    })(tos.split(':').reverse());
    window.pageTracker ? pageTracker._trackEvent('Time', 'Log', tos) : _gaq.push(['_trackEvent', 'Time', 'Log', tos]);
  }, 10000);
})('00');
</script>

Would you mind sharing us how did you added this codes? Its unusual that this code resides on the <header>. Please do not confuse the header.php with the <head> tag, that is actually different location on the page. And JavaScripts should go inside the <head> tag. Except the Facebook SDK code that should go just after the opening <body> tag as instructed on their site.

I did not see the suggested code on the link I’ve provided above on your child theme’s functions.php? Where did you add it?

Please provide us FTP credentials in private reply, we might need to do some testings, we are comfortable working from the Appearance > Editor..

Another thing, I am seeing a <big> tag on your topbar content, please remove that as HTML 5 does not support that tag. (reference), lets use CSS to resize a text instead.

Thanks.

[Author]

Posts