[Ken WParticipant]

I have an issue where the main header menu changes size and moves out of alignment as soon as I start scrolling. The website is http://harvesttech.events/. I tried disabling plugins and removing the logo from the header and nothing seems to work. I have several websites using the X Theme (under a different username) with the same settings and none of them have the same error. All plugins and, theme and WordPress are up to date.
What could be causing this and how to fix it?

[FriechModerator]

Hi There,

Thanks for writing in! This was happening because the width of fixed navbar is set to 88%. You can add this under Custom > CSS in the Customizer.

.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
	width: 100%;
}

Hope it helps, Cheers!

[Ken WParticipant]

Thanks. While it does fix the formatting issue, I don’t know why the same issue does not come up on our other websites like http://www.woodtech.events.
Also, the menu is meant to stick ot the top as I scrol the page – this is not happening at the moment.

[ChristopherModerator]

Hi there,

You can remove that CSS and instead increase height of navbar wrapper to greater number.

Find this code and change height value to greater number :

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 85px;
}

Thanks.

[Ken WParticipant]

Hi,
I ended up changing the navbar height to 90px via the customiser. This worked better than adding the css. I also set the max width of the logo a little smaller to 450px. The header is working even better – except for the ‘sticky’ menu.
This is a one-page website (mostly) and the navbar needs to been seen as you scroll down. There must be something, whether it is in the css or something, that is stopping the navbar from moving down while you scroll.

[Rue NelModerator]

Hello There,

Thanks for updating the thread. Fixed scroll is a known bug in the latest release which our developers will be providing a fixed in our next release. For the mean time, this line of code would probably resolve the issue.

@media (min-width: 767px) {
  .x-navbar-fixed-top {
    position: fixed !important;
  }
}

Please let us know how it goes.

[Ken WParticipant]

Thanks. That seems to work well. Obvoiusally it does not work once the screen size is less than 767px (which helps it not take up too much real estate on smaller screens), however for the time-being this will work for us.
I look forward to the bug fix in the next X Theme update.

[Rue NelModerator]

Hello Again,

We will let you know once we release our next updates. It will be rolling out soon!

Please stand by for it.

Cheers,
X

[Author]

Posts