[Resolved] Spacing evenly example 8 header & semi-transparent background on X-Box Edge

Home Forums Support [Resolved] Spacing evenly example 8 header & semi-transparent background on X-Box Edge

Home Forums Support Spacing evenly example 8 header & semi-transparent background on X-Box Edge

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1618946
    Dominique

    Hi,

    I got https://docs.generatepress.com/article/header-examples/#example-8 working fine as far as spacing on most devices.

    On X-Box Microsoft Edge it’s all clumped to the left.

    I added some webkit & ms to my CSS to try to fix it and it doesn’t work. Here is the CSS that I have:

    
    /* CSS for header layout - php needed in snippets */
    
    .nav-float-right .primary-navigation-wrapper {
        text-align: right;
    }
    
    @media (max-width: 768px) {
    	.primary-navigation-wrapper {
    		flex-basis: 100%;
    	}   
    	.site-header .header-widget {
    		margin-top: 0px;
    	}
    }
    
    .has-inline-mobile-toggle .inside-header {
    	justify-content: space-evenly;
    	-webkit-justify-content: space-evenly;
    	-ms-justify-content: space-evenly;	
    }
    
    .mobile-menu-control-wrapper {
    	margin-left:unset;
    }	
    
    /* END CSS for header layout - php needed in snippets */

    Figured it would work & it doesn’t.

    I also can’t get the background of header to go semi-transparent when sticky on x-box

    This is the code I have:

    
    /* Sticky site header 60% opacity on scroll */
    
    .site-header {
    	background-color: rgb(0, 0, 0, 0.6);
    	-webkit-background-color: rgb(0, 0, 0, 0.6);
    	-ms-background-color: rgb(0, 0, 0, 0.6);
    	position: sticky;
    	position: -webkit-sticky;
    	position: -ms-sticky;
      z-index: 999;
      top: 0px;
    }
    
    /* END sticky site header 60% opacity on scroll */

    Please advice on solutions.

    #1619441
    Leo
    Staff
    Customer Support

    Hi there,

    Is the issue only on X-Box?

    If so it’s likely because the X-Box version of the browser doesn’t support some of the CSS there.

    Not sure if there is anything we can do here.

    #1619469
    Dominique

    Hi,

    I noticed it only on X-Box One doesn’t mean that it’s not happening on older browsers or other devices. I don’t have all devices to do tests.

    The layout on 1920px wide screen is the same as tablet with smaller logo, hamburger icon, opening hours, phone number and two buttons on a single line all bunched together to the left. The opening hours, phone number and two buttons are not on top of the full menu with the full-size logo.

    The original site had no issues with the display of the top bar including the semi-transparent menu on sticky scroll.

    I did my best for the CSS as far as adding -webkit & -ms to existing sticky & background-color. Did the same for space-evenly.

    I was inspired by the following code that I found in GeneratePress support to separate four footer widgets on two lines in tablet & mobile. It works perfectly on the Xbox-One Edge browser. Same concept using flex box that is used in the header. I’m just not very good at flex CSS I am surely missing something.

    
    /* Mobile & tablet footer two columns */
    
    @media (max-width:1024px) {
        .inside-footer-widgets {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .inside-footer-widgets>div {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        }
    }
    
    /* END Mobile & Tablet footer two columns */

    Please advise.

    #1620456
    Leo
    Staff
    Customer Support

    I really feel like this is a browser problem and don’t believe there is anything we can do from the theme’s standpoint unfortunately.

    I did a quick Google search with keywords “transparency not working in microsoft edge” and do some quite a few mentions of this.

    #1620532
    Dominique

    Transparency of background works on all my other devices with Microsoft Edge. Not a biggie.

    How about the layout of the header not being as it’s supposed to?

    #1620752
    Leo
    Staff
    Customer Support

    Sorry it’s supposed to be what?

    Are we still only referring to the Edge on Xbox only?

    #1620804
    Dominique

    Yes the header that is all in a bunch on one line instead of two but the footer displays properly on Xbox One that has Microsoft Edge.

    On any website that I go on X Box One, that the only browser is Microsoft Edge, there is no header all bunched up or any display issues including generatepress.com As a matter of fact not a single website I visited including my competitors had any display issues.

    The header didn’t stick before, adding -ms-sticky; solved it.

    It must be related to MS-flexbox like in the footer. Something about chromium based or not Microsoft Edge that I have seen in one of the couple of hundred articles that I read in the last 15 days all accros the web to solve issues since I am using the GeneratePress theme…

    Here is a picture picture of my header with a hamburger menu and everything clumped up to the left on one line with tablet size logo not remotely how it’s supposed to be displayed and also a picture picture of generatepress.com that is not all clumped up to the left & not with a hamburger menu and displayed exactly like it supposed to on desktop. Mine nope all screwed up. My existing website on another domain name displays perfectly also.

    Am I asking for too much for the header to display the same way on all devices?

    #1621567
    Tom
    Lead Developer
    Lead Developer

    It really depends on the version of Edge that you’re using, especially as it’s on Xbox.. I’m not sure what percentage of the market is going to be using that combination.

    Flexbox is awesome, but does have some issues on older browsers in some instances. Seeing as the issue is on Xbox, it’s impossible to debug – there are no developer tools available, even if we ha an Xbox to test on.

    Can you replicate it using Edge on a PC?

    #1621591
    Dominique

    Certainly.

    On Xbox One the Microsoft Edge version is 44.18363.8131 date February 11, 2020 a non-chromium based version.

    I asked God (Google) & he delivered πŸ˜‰

    https://en.wikipedia.org/wiki/Microsoft_Edge

    #1621804
    Leo
    Staff
    Customer Support

    Does the issue happen using Edge on your PC?

    I checked and it seems fine to me.

    #1621814
    Dominique

    Install Microsoft Edge version 44.18363.8131 and it will do the same thing.

    #1622635
    Tom
    Lead Developer
    Lead Developer

    Will try to install that on my PC in the office tomorrow.

    That being said, if it is an issue, it’s likely not something we’ll be able to fix, especially as the majority of people are going to be using the latest version of Edge on their PCs.

    If you need Xbox support, it may be worth trying out the “Floats” structure in “Customize > General”. It’s certainly not as good, but it does have better browser compatibility.

    #1622769
    Dominique

    Hi,

    If I use the “floats” all the code for the “example 8” header layout will be invalid to my knowledge. That also includes the code for the footer layout that I am using. All of it is based on flexbox. To my understanding, I would go back to square one after 7 to 8 days full time to make it to the layout I have now. I’m not a coder πŸ™‚

    Just to give you an idea. I have been working all day at getting anchor links to not display behind the sticky header on Safari / IOS. I am using a class on the headline and scroll-margin-top with the different size of my header with media queries. Works perfectly on everything except Safari / IOS. Theres a bug report on it and the guy admits he’s been dragging his feet! I read everything on GeneratePress support. It always refers to this https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header read the whole thing and don’t understand how to implement it in GenerateBlocks with the “a” πŸ™‚

    #1623926
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’m not able to revert back to 44.18363.8131 on my PC, so I can’t see the issue.

    One thing to try:

    .site-logo {
        margin-right: auto;
    }

    Does that do anything?

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