[Resolved] Header & top bar background semi transparent on scroll using sticky command

Home Forums Support [Resolved] Header & top bar background semi transparent on scroll using sticky command

Home Forums Support Header & top bar background semi transparent on scroll using sticky command

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #1609951
    Dominique

    Hi,

    I have been researching this and found that it’s possible to get top bar & header sticky with a 50% transparent background on scroll.

    Being that I’m starting to understand CSS I think it can be done without a transition using strictly CSS.

    By using z-index and having a black background that stays there behind fixed and then the header & top bar always having a 50% black background above it.

    
    /* Sticky site header & top bar 50% opacity on scroll */
    
    .top-bar {
    	background-color: black;
    	position: fixed;
    	position: -webkit-fixed;
    	z-index: 998;
    	top:0;
    }
    
    .top-bar {
    	background-color: rgb(0, 0, 0, 0.5);
    	position: sticky;
    	position: -webkit-sticky;
    	z-index: 999;
      top: 0;
    }
    
    .site-header {
    	background-color: black;
    	position: fixed;
    	position: -webkit-fixed;
    	z-index: 998;
    	top:57.13; /* height of top bar */
    }
    
    .site-header {
    	background-color: rgb(0, 0, 0, 0.5);
    	position: sticky;
    	position: -webkit-sticky;
      z-index: 999;
      top: 57.13px; /* height of top bar */
    }
    

    I’m 80% there. The menu background color in header stays black in mobile.

    I can’t figure out how to implement a 3 second ease in transition.

    Any insights or help would be appreciated.

    #1610170
    David
    Staff
    Customer Support

    Hi there,

    pure CSS transitions on scroll are not possible – they require JS.
    If you want you can use the themes Sticky Navigation.

    You just need to unhook the Top Bar element and hook it into the Primary Navigation.

    This Topic explains how to do that:

    https://generatepress.com/forums/topic/header-widget-7/#post-1542588

    #1610191
    Dominique

    Hi,

    It worked as far as moving the top bar in the header.

    Since my buttons are links it took the typography of the menu and my buttons flew up in size. There is also a huge margin on the left.

    Please advise

    #1610204
    Dominique

    Hi,

    I created a class for the buttons inside the top bar to fix the text size and font family.

    Wondering, in mobile view will the top bar disappear?

    Please advise

    #1610371
    Elvin
    Staff
    Customer Support

    Hi,

    Wondering, in mobile view will the top bar disappear?

    It shouldn’t disappear unless you’re using mobile header.
    https://docs.generatepress.com/article/mobile-header/

    Have you already applied David’s suggestion? I’ve checked your site and I don’t see it implemented. Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1610379
    Dominique

    Hi,

    Thanks for getting back.

    I applied all including the code in example 8 referred to in the article.

    I created a class for the top bar buttons to fix Allex Brush and large font size being transferred to the buttons.

    I couldn’t figure out how to get rid of the huge margin that was there.

    I tested the layout all screwed up as is and I got a Cumulative Layout Shift in the 0.125 range.

    It seems that all these solutions of putting hooks in the header make that the initial layout is displayed and then shifted to the other layout. Maybe it also has to do with the resizing of the buttons and change of font inside them.

    I went away from page builders to get rid of uncontrollable layout shifts. I will live with what I have now as it seems unplausible to achieve the results that I am seeking without CLS going out of control.

    I do have something that is driving me nuts. The top bar is 42.59px down from the header. Go figure I had no idea that pixels could be split like that! If I put that value to make the site header stick it works well on android devices and pc with all browsers. On Apple or webkit devices I guess I get a gap between the top bar & site header. I tried 42px, 42.59px and 43px no combination works. How do I make that top bar a round number to fix the issue on all devices and operating systems?

    Please advise.

    #1610443
    Elvin
    Staff
    Customer Support

    I couldn’t figure out how to get rid of the huge margin that was there.

    Not sure what you mean by this. Can you provide screenshots marking this “margin”?

    I went away from page builders to get rid of uncontrollable layout shifts. I will live with what I have now as it seems unplausible to achieve the results that I am seeking without CLS going out of control.

    This is quite common for sites that lazyloads their logo.

    You should exclude the logo and see if it improves.

    I do have something that is driving me nuts. The top bar is 42.59px down from the header. Go figure I had no idea that pixels could be split like that! If I put that value to make the site header stick it works well on android devices and pc with all browsers. On Apple or webkit devices I guess I get a gap between the top bar & site header. I tried 42px, 42.59px and 43px no combination works. How do I make that top bar a round number to fix the issue on all devices and operating systems?

    Not sure what you mean by this. There shouldn’t be any issue with pixel values that have decimal numbers.

    But if you really must force the top bar to have a fixed rounded up pixel value, try this:

    .top-bar.top-bar-align-right {
        display: flex;
        width: 100%;
        min-height: 50px;
        justify-content: flex-end;
        align-items: center;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1611101
    Dominique

    Hi,

    I have been working on this header layout way too long.

    I came to these conclusions to avoid cumulative layout shifts:

    The name says it layout shift. Essentially you can’t do a “native” header layout then hook in stuff or change the layout without introducing layout shifts.

    Something as commonplace as adding or removing some padding or margin in “Additional CSS” introduces layout shifts.

    In order to fix the issue of having the gap between the top bar & site header being solved on all devices without introducing layout shifts I had to add in Customizer > Layout > Top Bar padding on top and bottom until I got to 43.59 pixels. Important not in “Additional CSS” I then applied the code that you supplied with a minimum height of 44 pixels. As a result a cumulative layout shift of 0.05. Retina or high density screens use a multiplier of 4. The minimum height had to be a clean divider of 4.

    The more I work on this header it becomes clear that there is no way to do better than what I have now without introducing layout shifts.

    Aside being really easy to use page builders suck. They introduce a gigantic amount of unused CSS & JS essentially bloat. It hinders performance considerably. Using plugins like AssetCleanup or Perfmatters Script Manager to remove per page, post or site wide CSS & JS until the site breaks will help & still it will be overly bloated. All the page builders or site builders that I tried so far being Elementor or Oxygen introduce substantial layout shifts.

    GeneratePress with GenerateBlocks kicks ass in all aspects. Building a header without introducing Cumulative Layout Shifts is just a series a compromises. It’s very restrictive in the choice of layouts but that’s the way it is.

    In May or June when Google introduces into their ranking algorithm the page experience factors MAYBE at that time developers of themes, plugins & page builders will code in consequence. Introducing large layout shifts using hooks or changing the layout in the viewport was never an issue until Google decided it was 😉

    I already had the site-logo & featured-image CSS classes & the name of files of the flags excluded from lazy loading. Essentially any image in the viewport.

    Thank you for the code for the minimum height.

    #1613742
    Elvin
    Staff
    Customer Support

    Aside being really easy to use page builders suck. They introduce a gigantic amount of unused CSS & JS essentially bloat. It hinders performance considerably. Using plugins like AssetCleanup or Perfmatters Script Manager to remove per page, post or site wide CSS & JS until the site breaks will help & still it will be overly bloated. All the page builders or site builders that I tried so far being Elementor or Oxygen introduce substantial layout shifts.

    I somewhat agree to this maybe except on Oxygen.

    Because Oxygen builder is themeless. It doesn’t have a huge pre-populated CSS like Elementor. This also means you create everything to see on the site from scratch. While the Oxygen builder adds in multiple element wrappers, that shouldn’t be the cause of CLS as CLS mostly comes from delays in loading of JS, CSS, font files or images and the most common offenders are usually the fonts files and the images.

    Thank you for the code for the minimum height.

    No problem. Thank you for sharing your experiences with us. Glad you got it sorted. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1613764
    Dominique

    Hi,

    I agree on Oxygen it is less bloated & themeless. It does have a lot of bells and whistles that advanced developers could find interesting.

    Using their header builder I was unable to bring the CLS lower than .300 no matter what I did. I also faced a lot of page layout issues that their support team were not able to fix. The support response is two to three days… They also don’t support WPML it’s really buggy.

    I was unable to make WP-Rocket work with Oxygen even after reaching out to their really good support. They tried really hard. Intermittent display issues.

    The bottom line is that GeneratePress combined with Gutenberg GenerateBlocks is leaps ahead stability & performance wise. Very well coded and lean. There is no comparison. An average of 250ms in Pingdom speed tests!!! Without a content delivery network and edge caching!!! These are not empty content pages that performance freaks gloat on. Its rich content with a lot of images. Can’t wait to see the results with everything on.

    Since I have been using GeneratePress with Gutenberg & GenerateBlocks I did not face a single bug. Only issues I have been facing is to display the header like I want it without cumulative layout shifts out of control. As a bonus you guys offer above & beyond support.

    Prior to making a purchase decision on any plugin or theme I pass their website through Lighthouse, GT-Metrix & Pingdom. The results speak for themselves. I could optimize generatepress.com with my eyes closed and easily double the performance. Tip: install WP-Rocket and turn everything on in the “File Optimization” tab. Also add perfmatters prelad, prefetch and remove css per page with the script manager like what is stripe doing on your home page.

    There is no such thing as a gourmet free lunch. You always get what you pay for. I don’t believe at all in free plugins & themes or anything free. It think it’s a disease of a vast majority of the WordPress community. They expect free plugins. They wouldn’t work for free & expect others to do so.

    Straying off.

    After looking at all the header layouts “example 8” would be the one that I am looking for. If the layout stays the same as I have it now in mobile. The idea is to have a bigger site logo in desktop to populate the existing free space on the left that now looks odd. Do you think it is possible to acheive those results by keeping the cumulative layout shift under .100?

    #1613791
    Elvin
    Staff
    Customer Support

    Using their header builder I was unable to bring the CLS lower than .300 no matter what I did. I also faced a lot of page layout issues that their support team were not able to fix. The support response is two to three days… They also don’t support WPML it’s really buggy.

    I was unable to make WP-Rocket work with Oxygen even after reaching out to their really good support. They tried really hard. Intermittent display issues.

    Ah right yeah this is one of the downsides. And both Oxygen’s and WPML’s documentation aren’t helpful either. lol

    After looking at all the header layouts “example 8” would be the one that I am looking for. If the layout stays the same as I have it now in mobile. The idea is to have a bigger site logo in desktop to populate the existing free space on the left that now looks odd. Do you think it is possible to acheive those results by keeping the cumulative layout shift under .100?

    It’s hard to tell without actually seeing the Google PSI or GT Metrix results. We could speculate at best and do the usual routine in avoiding CLS issues like exempting images from lazyload, improve TTFB, optimize images and optimize serving of fonts, CSS and JS (cache and aggregate).

    A wise man once said:
    "Have you cleared your cache?"

    #1613805
    Dominique

    Hi,

    All the optimizations you mentioned are already done. I am purposely developing with Varnish on the server, WP-Rocket & perfmatters for all optimizations. I am clearing caches everywhere constantly 😉 It gives me in real time the cumulative layout shift as I do modifications. I had way too many issues in the past with cumulative layout shift & it’s easier to find the culprit & troubleshoot.

    The trick is that all layout shifts must be done before the breakpoint of 500 ms when lighthouse starts measuring them. I find the breakpoint of 500 ms too short. Who can argue with Google… It’s easy to achieve on desktop when the whole page loads in an average of 250 ms. Not as easy in mobile when it loads in around 1.2 seconds.

    Using hooks, PHP & then CSS above the existing theme PHP & CSS to my experience are not a great idea to do in the viewport at page load to keep cumulative layout shift in line. On a header, it now seems bad practice with the new page experience metrics introduced in Google’s ranking algorithm starting in May. Who cares lower down the viewport CSS, PHP & hook to death. Before that was the mindset in the header. Bah it shifts, who cares.

    I will try the layout again right away take it to the end and see.

    Have a look at the top bar that’s squeezed to the right and the large left margin that I previously mentioned.

    #1613811
    Dominique

    Hi,

    I applied as recommended PHP & CSS as recommended in https://generatepress.com/forums/topic/header-widget-7/#post-1542588

    I also created a new class for the buttons as they where taking on the typography of the menu. They are now too wide. Should be fixed when it goes to one line.

    When switching to tablet & mobile the top bar disappears. Not the intended result. Also the logo should reduce to 192px wide.

    There is a large margin on the left of opening hours, phone numbers & buttons.

    I looked at the code in https://docs.generatepress.com/article/header-examples/#example-8 and it seems to take the header widget and move it around. It seems wrong.

    Surprisingly the cumulative layout shift is in control.

    Please advise

    #1613831
    Dominique

    I moved the content from the top bar widget to the header widget and applied the code in example 8 it’s starting to move in the right direction.

    The site logo is not reduced to 192px.

    The menu widget is now displayed in tablet & in mobile 🙂 It’s underneath the menu & logo instead of on top where I would like it to be.

    The spacing of the second button in the menu widget “SMS” is way out.

    #1613901
    Dominique

    Hi,

    I figured it all out except some CSS adjustments and changing logo size left that I will take care of.

    Still have to figure out using the sticky of the theme to get the end results that I want. Worst case I will go back to the “stick this” method.

    Cumulative Layout Shift is averaging around .08 so its border lining the .100 breakpoint with a slight padding.

    Finally!

Viewing 15 posts - 1 through 15 (of 36 total)
  • You must be logged in to reply to this topic.