Sticky header

[Yvonne]

Is there any way to set up a sticky header in the Xtreme Plus theme? So that when scrolling through the page, the header stays fixed at the top of the screen on both desktop and mobile (the menu has this option, but the header doesn’t).

[User]

I’m sure that @Scrambler will have solution for that…..

[scrambler]

There are a number of options to fix things at the top.

First of course you can fix just the menu on top using the “Fixed top menu” option in the menu settings

You also have a “Fixed-top header widget area” option to fix the Header widget area.

Now if you want to fix the whole header, there may be a simple CSS way to do that (simpler than the general method below), but I would need a link to the site to see the exact configuration and test.

Or else, and if you have Plus, you can use the general method described in the guide article below

Script: Fix anything to Top on Scroll – Weaver Xtreme Guide

 

[Yvonne]

@scrambler my page: https://pogon24.info/

 

I want my header to stay visible when scrolling, just like the menu, which is pinned at the top.
I tried following the guide, but I don’t understand any of it. I’m so sorry from the bottom of my heart.

[scrambler]

If you mean the whole top area above the menu, you realize that this header and menu occupy almost half of the height of the browser, so if it stays fixed, then people will have to scroll through your website inside a narrow window which will be very unpleasant and inefficient.

[Yvonne]

Once I manage to pin the header, I’ll unpin the menu

[scrambler]

And your logo under the menu really wastes a lot of space too.

Possible way to optimize a bit if you want a fixed header, it to combine the logo under the menu and the header image above it into the header image.

Like that Logo and pogon24.ino will the header image, freeing space below the menu.

Then when we fix the header, we can also shrink the header image a bit so it maximizes the browsing space.

Food for thoughts, let me know.

Also, do you have the weaver “Plus” plugin?

[scrambler]

“Once I manage to pin the header, I’ll unpin the menu”

The menu is in the header, so once you fix the header, then the whole top (header image, menu and menu image) is fixed.

Are you saying you would like to only fix the header image but not the menu?

 

[Yvonne]

yes. I have Xtreme Plus there.

 

I want to remove the logo below the menu.
I want to keep only the header and one menu.

[Yvonne]

Are you saying you would like to only fix the header image but not the menu?

YES

[scrambler]

If you have Plus, and you only want to fix the header image, and not the menu, the easiest way to do it would be as follow.

Method one:
Unfix the menu

As explained in the guide article, you need to copy the script that is given in the article and paste it in the “Advanced Options” > HTML Insertion area > Post Footer Box

Then add the class wvrx-scrollfix in the Header Image “add class” box (which I think you already did)

Method two

Unfix the menu

Remove the header image

Put the header image in the header widget area

Use the Option to fix the Header widget area on top

I will be traveling for a couple of days, so I will only be available the next couple of hours, then on the 19 -20

[Yvonne]

Thank you so much. I went with the second option, and it looks great.
The only issue is that the menu is loading with a delay now—I wonder if that’s caused a shift, and PageSpeed Insights doesn’t like that—it’s ruthless, hahaha

 

look: https://pogon24.info

[scrambler]

It looks like there are issue with google fonts loading as shown in the console

(index):11 GET https://pogon24.info/wp-content/themes/weaver-xtreme/assets/css/fonts/google/google-fonts.min.css?ver=6.7 net::ERR_ABORTED 404 (Not Found)
8c7be8d5-a438-40c1-bcaf-603c928982f8.js:3 JQMIGRATE: Migrate is installed, version 3.4.1
03b12af0-4e06-44aa-a8fc-e7063a2f1a1d.js:2 other consent type, no cookie warning
(index):4451 A preload for ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4977042918420212’ is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
f @ (index):4451
(index):4451 A preload for ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4977042918420212&host=ca-host-pub-2644536267352236’ is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
Promise.then
a @ (index):4451
u @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
(anonymous) @ (index):4451
f @ (index):4451
/#google_vignette:1 The resource https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4977042918420212 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
/#google_vignette:1 The resource https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4977042918420212&host=ca-host-pub-2644536267352236 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
omweb-v1.js:84 Blocked script execution in ‘about:blank’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.
Yd @ omweb-v1.js:84
(anonymous) @ omweb-v1.js:85
(anonymous) @ omweb-v1.js:85
omweb-v1.js:84 Blocked script execution in ‘about:blank’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.
Yd @ omweb-v1.js:84
(anonymous) @ omweb-v1.js:85
(anonymous) @ omweb-v1.js:85

 

[Author]

Posts