Fixed navbar jumps when I start scrolling

Support
#1

Hello,

I have a mysterious problem on my X-Theme Website with fixed navbar. If I scroll down, first the navbar jumps a bit up and down. After this, all looks fine. It’s just the first scroll action on the fresh loaded page. Please can you help me to fix this?

If I change the top-position from the widget-button (red flag image) to:
.x-btn-widgetbar i { top: 4px; right: 59px; }
the problem doesn’t exist anymore. But the Button should end on top of the page, without a white space. :thinking:

And a small second question: How can I change the widget-bar height to 60px. If i add the change to the css of my child.theme, there is a short x-widgetbar.collapsing with height: 77px which creates a small jump of the widgetbar. Can I remove this or what is the best way to setup a new height?

Thank you!

#2

Hello There,

Thanks for writing in!

1.) I haven’t noticed anything in your navbar. Could you please send us the before and after screenshots?

2.) The height of the widget bar will depend on the content height. At the moment, since you do not have assigned widgets in it, the height only consists of the padded space of the widget area. If you want to reduce this padded area, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-widgetbar-inner {
    padding: 30px 0;
}

The css will give you a minimum height of 60 pixels.

Hope this helps. Please let us know how it goes.

#3

Hey RueNel,

thanks for your help. I’ve created a screencast of my Browser, to show you the problem. Please have a look at the cursor. After the site is new loaded, and I scroll the first time down, the navbar makes a short jump. After this, all is good. If I reload the page and start the first scroll down, the navbar jumps once again. I think, this problem is because the widgetbar-button is on top of the page (css setting – top: -1px;). If I change the button position to: 4px instead of -1px, the problem ist fixed. But the button isn’t on top of the page.

It’s a quandary :stuck_out_tongue:

#4

The issue doesn’t happen on my end too. Please clear your browser cache or use incognito or another browser then test again. If you have browser extensions, disable them also.

#5

This is really strange, but thank you for your efforts! I’ve tested the page on Chrome and Safari (Mac OS) on two different devices and both showing me this issue. But okay, perhaps I’ll find a solution later.

Please, can you help me with another small question? The red flag (widget-bar-button) is right now a .png file. I’ve changed the Icon with this code I’ve found in another thread of the forum:

.x-btn-widgetbar .x-icon-plus-circle:before {
content: url(/wp-content/uploads/2017/08/sedu-banner-flag.svg) !important;
}

That works fine, but now I would change the image with a .svg file (Source: /wp-content/uploads/2017/08/sedu-banner-flag.svg ). On my Wordpress installation I can use svg files (my logo is an svg-file too). But if I change the source to my svg-flag, I cannot see the image. Is there anything else I have to add to the css?

#6

Hi,

You need to specify the height and width, try changing your code to this

.x-btn-widgetbar .x-icon-plus-circle:before {
    content: url(http://seduction-graphic.de/wp-content/uploads/2017/08/sedu-banner-flag.svg) !important;
    height: 186px;
    width: 94px;
    display: block;
}

Hope that helps

1 Like
#7

Thank you very much! Works great.

By the way: the “! Watching” function in the apex forum doesn’t work. I don’t receive informations about new posts in my topic. :slight_smile:

#8

You’re welcome. I’ll forward this it to our developers.

Thanks.