[davidgaizParticipant]

Thanks Paul, it’s almost there. You’ve fixed that line issue, but now when you scroll down the top bar disappears completely. Can we remedy that?

Thanks!

[Rue NelModerator]

Hello There,

Thanks for updating in! To resolve the topbar issue and make sure that it remains on top when you scroll down the page, please add the following JS code in the customizer, Appearance > Customize > Custom > Edit Global Javascript

// Fixed Top Navbar
// =============================================================================

jQuery(function($) {

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

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

    $(window).scroll(function() {

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

    });

  }

});

We would loved to know if this has work for you. Thank you.

[davidgaizParticipant]

Hi Rue Nel,

Thanks for the help. I tried it, but it didn’t work, still having the same issues. In looking back through this thread, I’ve been given lots of different css and js to input to get the header set. Any chance some of it isn’t needed, as some of it may not have worked? Could some of the code be conflicting or causing problems with these new suggestions I’ve been getting?

Thanks!

[RadModerator]

Hi there,

How about removing all your custom javascript, and just add this one.

jQuery( '.x-topbar' ).prependTo('.x-navbar');

Then add this to custom CSS

.x-brand.img {
    z-index: 99999;
}

Then remove this custom CSS

@media(min-width: 969px) {
.x-navbar.x-navbar-fixed-top {
    top: 50px;
}
}

Make sure to backup all the custom CSS and javascript that you’ll remove.

Thanks.

[davidgaizParticipant]

@rad – Thanks, you’re a genius! That did the trick. Thank you so much!

So the only thing that didn’t work out with this is that the phone number disappeared from the top bar on mobile. Any way to add that back without screwing this progress up?

And the last thing I’m trying to accomplish with this header area is to fix the drop downs. On another site I have – davidgaiz.com, the drop downs don’t have a gap between them and the main nav, and they come straight down from the nav item. I used ubermenu on that site which I had to disable on this site. I’m trying to accomplish the same thing on this site and increase the text size of the drop downs, have the text be black, and blue on hover. I don’t know how to accomplish this without screwing up any of the fixes you’ve given, can you give me some advice on how to tweak those drop downs?

Thank you so much for your help, I’ve been battling with this whole header area for a couple of weeks now and it’s just about there!

[RadModerator]

Hi there,

Please remove this CSS as well,

body.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-top: -25px;
}

And please add this as well for submenu gap fix

.x-navbar .desktop .x-nav > li ul {
    top: 75px;
}

Hope this helps 🙂

[davidgaizParticipant]

Hi @rad,

Thanks for the suggestion. I gave it a shot, there’s still a gap with the submenu unfortunately. And half of the logo is being cut off by the top bar.

Any other suggestions?
Thanks!

[RadModerator]

Hi there,

This is @media is not properly closed.

@media (min-width: 481px) and (max-width: 766px) {
  .x-main.full {
    margin-top: 170px;
}

Please add close bracket else, CSS below it will only work on that specific device.

Thanks!

[davidgaizParticipant]

Thank you @rad, that helped.

Attached a screen shot, last thing I’m looking to do here is remove that gap where I put the red squiggly line (in-between nav bar and the drop down menu). Also looking to see if I can adjust the position of that 2nd level drop down menu by shifting it to the right.

Any suggestions on how to do this without undoing any of the changes that have been made to get everything to this point?

Thanks!

[JoaoModerator]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    right: 0px;
    left: 100%;
    min-width: 300px;
}

.x-navbar .desktop .x-nav > li ul {
    top: 80px;
}

Hope it helps

Joao

[davidgaizParticipant]

Thanks, all good now!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts