[ddebauveParticipant]

Hi there,

I searched a while for an answer on the forum and tried various codes I’ve found here and there but nothing worked.

Header menu is set on “fixed” & “inline” (icon 1), once I scroll down the page header is fixed ok (height) but stretches out (width goes banana) so that part of my menu goes out and is hidden. Funny thing is it won’t do it while I’m on the “personalizer”. I’m using Chrome and checked this out on Firefox and Safari, all 3 have the same problem. WP and theme are up to date.

Here are the sites where the problem occurs :
http://www.yourparking.be
http://www.yourshuttle.be

Thank you for your help !

[RupokMember]

Hi there,

Thanks for writing in! upon checking your given links I can’t find such issues. It seems the header is working as expected on Firefox, Chrome and Safari. Would you please try clearing your browser’s cache or try form a different PC? If you still see the same then please clarify it a bit with some screenshot that reflects the issue. After getting your problem, we’ll be happy to assist you.

Cheers!

[ddebauveParticipant]

Hi Staff,

Thanks for your prompt reply.
Unfortunately I still have the same problem after clearing the caches from my browsers (Chrome, Firefox & Safari), even restarted the computer.. and then checked also on a pc (I’m on a mac) with Explorer and same again.

Here are some images:

Ps: headers for both sites behave correctly on tablets and phones, and while I’m on the customizer on a standard screen (<– super strange !).

Hope you can fix this..

Thank you so much !

[ZeshanMember]

Hi there,

To fix this issue, please add following JS code under Custom > JavaScript in the Customizer:

// Boxed Layout Navbar Width Fix
// ========================

jQuery(document).ready(function($) {
  var body          = $('body'),
      fixedNavbar = $('.x-navbar.x-navbar-fixed-top'),
      site              = $('.site');

  function boxedNavbarSiteWidth($widthScreen) {
    if ( body.hasClass('x-boxed-layout-active') ) {
      var siteWidth = site.width();

      if ($widthScreen >= "1190" && $widthScreen <= '1580') {
        fixedNavbar.css('width', siteWidth);
      } else {
        fixedNavbar.css('width', '90%');
      }
    }
  }
  var widthScreen = $(window).width();
  $(window).ready(boxedNavbarSiteWidth(widthScreen)).resize(function() {
    var widthScreen = $(window).width();
    boxedNavbarSiteWidth(widthScreen);
  });
});

Hope this helps. 🙂

Thank you.

[ddebauveParticipant]

Hi again,

unfortunately this is not working… Tried on both sites, cleared caches and same again..

I’m gonna cry… help !

🙂

[ddebauveParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Please add this css at Admin > Appearance > Customizer > Custom > CSS

@media (min-width: 1200px) {
body.x-sidebar-content-active .x-navbar-fixed-top {
    left: 0 !important;
    right: 0;
    width: 100% !important;
    background-color: transparent !important;
    border: 0px;
}
body.x-sidebar-content-active .x-navbar-fixed-top .x-navbar-inner {
    margin: 0 4.5% 0 calc(295px + 4.5%);
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.075);
}
}

Cheers!

[ddebauveParticipant]

Now you’re talking! 😀

Except that the thingy (header) is now a bit too narrow when scrolling down..
See image :

This “short header” shows up on Firefox and Safari for both sites, but not on Chrome (where it’s perfect thank you!).

I’m sorry for this hassle.. and hope you’ll find a solution.

Thanks again!

[RadModerator]

Hi there,

Looks like this has different effect on each devices, so I removed all changes mentioned above. Then I just added this little snippet.

jQuery ( function($) {

$( window ).on('scroll', function() {

$('.x-navbar-fixed-top').css( { 'max-width' : $('.masthead').width() } );

} );

} );

Works okay now. Cheers!

[ddebauveParticipant]

There you go !
JUST PERFECT 🙂

Thank you so much (and for your patience too…)

[ChristopherModerator]

You’re welcome.

[Author]

Posts