- This topic has 25 replies, 3 voices, and was last updated 4 years, 8 months ago by
.
-
Posts
-
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.
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.
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.
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.
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?
Sorry it’s supposed to be what?
Are we still only referring to the Edge on Xbox only?
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
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 
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?
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?
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 😉
Does the issue happen using Edge on your PC?
I checked and it seems fine to me.
Install Microsoft Edge version 44.18363.8131 and it will do the same thing.
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.
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-topwith 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” 🙂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?
- You must be logged in to reply to this topic.
