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

[Dominique]

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

It removed the “space evenly” on all other browsers. It made that the logo is on the left & navigation for mobile & opening hours phone number & buttons on the right.

The layout is not as per “example 8” with full menu or as any other browser.

I put the login details in private information.

[Dominique]

Hi,

I figured it out.

Some big vilain at Microsoft Edge development for Xbox One decided that the breakpoint or page width would be at around 1100 pixels no matter the actual display device!!!

I had a higher breakpoint for mobile menu at 1275 pixels. Reduced the size of the typography of the menu, Reduced the size of the logo for a determined range of screen widths and lowered my mobile menu breakpoint at 1024 pixels.

I am more and more amazed at how the developers of browsers seem to add unnecessary issues. So far there are a few that I would bitch slap till they would break into a tantrum.

[Dominique]

All that is left to do is to make the logo, navigation and header widget space evenly.

Or to have the navigation & header widget go to the right without affecting the space evenly on all other browsers.

[Tom]

Glad you got that sorted!

I’m no longer seeing your URL in the private info areas. Is the spacing an issue on all browsers?

[Dominique]

The spacing is only on non chromium Edge on X Box One.

I think the vilain at Microsoft Edge for X Box One switched the resolutions. A 1080p tv is 1080px high by 1920px wide. So he went 1080 px wide. Won’t be surprised if at 4K he did the same thing in that case no issue as the resolution is 3840 wide by 2160 high. I am verifying with a friend that has a 4K TV.

I’m experimenting, trial/error with:

display: -ms-flexbox;
-ms-flex-pack: space-evenly;

I also made the transparent backwound work on sticky on X Box One Edge by adding an “a” after rgb. It wasn’t an issue with all other browsers.

I put back the login details including url in the private info area.

[Dominique]

space-evenly is supported in CSS Grid but not Flexbox

https://caniuse.com/justify-content-space-evenly

Found this about space-around:

https://stackoverflow.com/questions/47534216/how-to-make-css-justify-contentspace-evenly-fallback-to-space-between-on-safari

Trying to fix without any results.

[Dominique]

All fixed for all browsers with full backward compatibility.

/* 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%;
	}   
}

.has-inline-mobile-toggle .inside-header {
	-webkit-justify-content: space-evenly;
	justify-content: space-around;
}

.mobile-menu-control-wrapper {
	margin-left:unset;
}	

/* END CSS for header layout - PHP needed in snippets */

Sticky header and semi-transparent background:

/* Sticky site header 60% opacity on scroll */

.site-header {
	background-color: rgba(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 */

Not bad for a newbie at CSS 🙂

Now if I can get anchor links headings not to be hidden behind site header on Safari & IOS…

[Tom]

If you use our built-in smooth scroll feature and sticky navigation option, it should resolve that for you automatically 🙂

[Dominique]

If I can get the header to stay the same way instead of turning into a itsy bitsy tiny header in mobile and in desktop that I lose the header widget with an animation on the site logo I would be able to use it indeed 😉

Since the implementation of the sticky header is very narrow & restrictive, I have no other choice then do it the “stick this” way.

I have yet found a way for my header to stay exactly the same with the bottom border. If there is a way please do enlighten me. It’s more like that’s the only way it’s going to stick. I don’t like the way it sticks 🙂 I want the opening hours, phone number, call to action buttons & bottom border to follow with the sticky header.

The workaround is to implement without scroll-margin-top one of the solutions in https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header so that it applies to all browsers including all the ones in IOS & Safari on all other non IOS Apple devices.

All I was able to achieve so far is to make the heading disappear 🙂

Any help would be greatly appreciated, and my header would finally be finished after around 18 days of doing all sorts of stuff with it to actually make it do what I want 🙂

[Tom]

There are quite a few ways to accomplish it (which I’m sure you’ve found), but none of them are perfect, unfortunately. The one we implemented with our own scripts was difficult to achieve – tons of testing and custom javascript. Unfortunately I’m not able to do the same for a custom implementation.

Soon, we’ll be replacing our current sticky navigation option with a sticky option you can apply to the entire header if you like. At that point, we’ll be sure to make it compatible with our smooth scrolling 🙂

[Dominique]

Sounds like a plan.

Thanks

[Author]

Posts