Docs

[GetRecovery]

This is my first post on the forums and I’m by no means an expert at coding, so please bear with me.

Here is a link to the website that I am building…
http://getrecovery.com

I’ve been asked to create a way for the information in the topbar (text, email, phone number) remains on the screen at all times regardless of where the user has scrolled on the page.

I’ve searched the forums and tried out a few solutions such as creating a fixed topbar or fixed footer, but everything I tried had problems such as the topbar covering my logo, or the footer covering up some of the content on the bottom of the page but showing up underneath other random items.

Anyway, I would be more specific in my question if I could but I genuinely don’t know what I’m asking for… all I know is that I need some sort of solution to this problem. By the way the critical element that needs to be displayed is the phone number, so I’m also open to solutions that don’t even involve the top bar.

Hopefully I’ve given you guys enough to go on… let me know if you need anything else from me.

Here’s one of our competitors sites… that does what I’d like mine to do…
http://americanaddictioncenters.org/

Thank you in advance!

[Zeshan]

Hi there @GetRecovery,

Thanks for writing in!

If I understand your question correctly, you want to achieve something similar to this: http://recordit.co/hsPLddKfSW, i.e., fix the topbar and navbar to the top of the browser on scroll. If so, first remove your current code (it contains errors) under Custom > JavaScript in the Customizer and then add following code in it:

jQuery(function($) {

  var $body   = $('body');
  var $navbar = $('.x-navbar');

  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {

    var boxedClasses = '';

    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {

      if ( $(this).scrollTop() >= navbarOffset() ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }

    });

  }

  function navbarOffset() {
    return $('.x-navbar-wrap').offset().top - $('.x-topbar').outerHeight() - $('#wpadminbar').outerHeight();
  }

});

After that, add following CSS code under Custom > CSS in the Customizer:

@media only screen and (min-width: 980px) {
  .masthead {
    margin-top: 46px;
  }

  .x-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

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

  .admin-bar .x-topbar {
    top: 32px;
  }

  .x-topbar .x-navbar.x-navbar-fixed-top {
    top: 78px;
  }
}

Hope this helps. 🙂

Thank you!

[GetRecovery]

Thank you! Yes the example you posted is exactly what I’m looking for.

I added the code and it appears to have worked… however it’s not quite as smooth as the example video you posted. The navbar scrolls under the top bar a bit then quickly snaps into place. It’s not really that big of a deal but I was wondering if you know why that might be happening?

Also, you mentioned that I should remove the code I currently have in the custom CSS… do you know which part I need to remove, because it currently solves other problems I was having with font size, coloring certain elements, and keeping the navbar from wrapping to a second line.

Here’s all the code that’s currently in my custom CSS including the code you just gave me to add…

.x-topbar .p-info, .x-topbar .p-info a, .x-topbar  {
    font-size: 16px !important;
}
.x-topbar {
    background-color: #ffffff !important;
}
@media (max-width: 1100px){
.x-topbar .p-info, .x-topbar .p-info a, .x-topbar, .x-social-global {
    display: none;
}
}

.x-logobar {
    background-color: #fffaf3;
}

.x-slider-container.below {
    border-bottom: none;
}

.x-icon-diamond-circle {
     color: #00aeff;
}

/* closed accordion header font/background code */
.x-accordion-heading .x-accordion-toggle.collapsed {
    color: #39597c;
    background-color: #aae2ff !important;
}

/* open accordion header font/background code */
.x-accordion-heading .x-accordion-toggle {
    color: #ffffff;
    background-color: #00aeff !important;
    font:  17px "Fjalla One" !important;
}

/* hover accordion header font/background code */
.x-accordion .x-accordion-toggle.collapsed:hover {
    color: #ffffff;
}
/* hover accordion header font/background code */
.x-accordion .x-accordion-toggle:hover {
    color: #39597c;
}

@media (max-width: 1070px) {
	.x-navbar .desktop .x-nav > li > a {
		letter-spacing: 0px !important;
	}
}

@media (max-width: 1070px) {
	.x-navbar .desktop .x-nav > li > a {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}

@media (max-width: 1070px) {
	.x-navbar .desktop .x-nav > li > a {
		font-size: 16px !important;
	}
}

@media only screen and (min-width: 980px) {
  .masthead {
    margin-top: 46px;
  }

  .x-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

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

  .admin-bar .x-topbar {
    top: 32px;
  }

  .x-topbar .x-navbar.x-navbar-fixed-top {
    top: 78px;
  }
}

[Zeshan]

Hi there,

Thanks for writing back!

You don’t need to remove the code under Custom CSS section but under Custom > JavaScript. This is the code that you need to remove (see: http://prntscr.com/avexkm):

<?php if ( function_exists('yoast_breadcrumb') ) 
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

It’s a PHP code block and that’s why causing an error. Removing the code should make the navbar transition smoother exactly as in the screencast.

Hope this helps. 🙂

Thank you!

[GetRecovery]

Cool deal! Yeah as soon as I removed that other Java Script it worked perfectly!

However there are a couple new problems it caused that I need your help solving..

1.) When viewing the phone on my iPhone 6 (and i assume all other mobile devices)…
• The usual navigation button (3 stacked horizontal lines) has been replaced with word “Navigation”
• Once you click on the navigation button it expands but only shows the top level items and doesn’t have the option to expand to show sub-menu items.
• There is no topbar on mobile which is necessary, and instead there is the words “Get Recovery” duplicated above our usual “Get Recovery” logo.

2.) On my full size iPad, Gen. 3 (and I assume all other tablets)….
• There is no top bar which is necessary
• The Navbar is fixed and scrolling with a blank space above it where the topbar should be.

I’ve attached screenshots from both a mobile and tablet device that shows the problems.

Thank you for you help on this! We are almost there!

Scott

[Jade]

Hi Scott,

I have checked on mobile but I can’t seem to replicate the issue about the burger menu icon and the dropdown arrow for submenu items. See screenshot below.

For the topbar for mobile, please add this CSS in the customizer:

.x-topbar, .x-topbar .p-info {
    display: block !important;
}

.x-topbar-inner {
    width: 100% !important;
}

Hope this helps.

[Author]

Posts