SOLVED: Header shifts left when scrolling up if navigation has submenu and header is fixed

Bugs
1

Bricks Version: 1.6.1
Browser: Chrome 108.0.5359.125
OS: Windows
URL: [https://staging.oberseechuchilachen.ch/]

I have a header template with a logo and a navigation menu that has a submenu (standard Wordpress menu).

In the header template I have activated Fixed Header and push-up after 200px and a scroll-shadow.

In the Chrome browser on Windows, when I scroll up, as soon as the 200px are reached, the header shifts suddenly left (I guess around 20px?) and then it disappears. On the right side of the header for a split second a scrollbar is shown, which I guess is the reason why the header shifts left.

When I use the exact same header with a navigation menu that has NO submenu, then the header works fine and no shifting to the left happens when I scroll up.

So I guess something goes wrong with the header hiding / scrolling-up functionality if the navigation menu has a submenu.

Thanks for helping

Patric

1 Like
2

Hi Patric,
Welcome to the forum, and thanks so much for your report!

I was able to reproduce the issue and probably found an easy fix. Please add the following custom CSS and check, if it solves the issue:

#brx-header::-webkit-scrollbar {
  display: none;
}

Best regards,
timmse

3

Dear timmse

Thanks! It works.

Thanks and best regards

Patric

5

I noticed the same for mine. Can we expect a fix in the builder instead of adding multiple custom codes for the fixes(not supposed to be done by the users) to our site? Otherwise, we must remember all the custom codes for it every time we build new sites.

4 Likes
6

Hi Jornes,
Of course, you can expect a fix (see the title, it’s in progress). Using the custom CSS allows you to fix the issue immediately, but no one forces you to add it :wink:

Best regards,
timmse

1 Like
7

Hi guys,
We’ve fixed this bug in Bricks 1.7 beta, now available as a manual download in your Bricks account: Account – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

1 Like
8

Thankful that this issue is resolved in version 1.7. I was confused a lot and now there is a solution. Thank you Bricks team, I appreciate what you guys are doing

9

Hi Timmse!

I’m making a onepgae size, and maked my “header” to fixed.
But in mobile view the section is overflow. You said, in bricks 1.7 beta was fixed, but no. :slight_smile:
If I turned off the fixed css with chrome devtools the overflow problem is gone, but my header is not “sticky”.

I’m using 1.7 stable version.

image
image1388Ă—262 39.3 KB

image
image1405Ă—225 33.6 KB

image
image1917Ă—978 150 KB

10

Hi,
This report was about a vertical scrollbar, not an overflow :slight_smile: I don’t see a scrollbar on your screenshots though. Nevertheless, a link would be very helpful.

11

Hi @timmse !

I’m sorry if I was careless and posted in the wrong place. I didn’t want to open a new post.

Here is the link: https://apparently.simplecreative.hu/

12

With the header/menu I see no problem. Further down, however, your SVGs cause an overflow:

image
image1920Ă—1251 200 KB

Set the code element to overflow:hidden.
Nice Layout, btw!

1 Like
13

OH MY GODE! You are write! :smiley:

The problem was really the 3 code elements. I put it owerflow hidden, and its working. :slight_smile:

I suspected the header because only that one element owerflowed from the picture, the code elements were visually perfectly fine. :smiley:

Thank you for the positive feedback about the layout.
It is far from ready, and it takes a disproportionate amount of time, compared to the fact that it will “only” perform the function of a landing page. :slight_smile: