How to stop the header and after header splitting when scrolling iPhone in portrait view?


(Blu McCormick) #1

Does anyone have any idea why the after head and header might split when scrolling the forum on a mobile phone? [I added a horizontal menu to the after header.]

Here are some sample videos in portrait and landscape view to show you what I am talking about:


It happens on my iPhone regardless of whether I access the forum through the app or the web or through Safari, Firefox or Chrome.

Here is the code for the after header in case that might be relevant.

COMMON CSS:

    @media (min-width: 900px) {
	.menu {
		font-size: 1.25em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}

#bar a,
#bar a:visited {
	color: #484848;
}

#bar a:hover,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0.25em auto;
	padding: 0;
}

#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: fixed;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: 55px;
	width: 100%;
	padding-top: 0;
}

nav#bar:before {
	content: “”;
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}

COMMON AFTER HEADER

[@ lll]


(Simon Cossar) #2

It’s because of the nav#bar { position: fixed } rule. iOS devices have elastic scrolling on overflow that can do weird things to fixed elements. If you change the position and top values to something like this it should work:

nav#bar {
    position: relative;
    top: -60px;
}

(Blu McCormick) #3

Thanks, Simon! Awesome.

I inputted the code and have a couple of questions.

  1. Changing fixed to relative position fixed the disconnect between header and after header on the iPhone but it left the after header on the desktop not reaching the bottom and sides as defined by the gray background:

What parameter could I change to fix that, do you know?

  1. There is now a slight gap between the header and after header in the iPhone view. What would I tweak to set that right? [N.B. beyond the gap between header and after header, the following video shows how nicely your code change fixed the splitting header and after header]

Here is the evolution of the code for this menu that III has been helping me with (thanks, lll](Profile - lll - Discourse Meta)). The same problem popped up at the beginning of this thread below and position is one of the variables that has changed over time.

Thank you!


(Simon Cossar) #4

For the width of the after header you could probably set it to width: 100vw; instead of width: 100%; to get it to fill the full screen width on desktops.

You can adjust the gap at the top by adjusting the top: -60px; rule. Try something like top: -64px; added to your theme’s mobile css.


(Blu McCormick) #5

The 100vw fix worked like a charm.

What exactly do I cut and past into MOBILE CSS? Cutting and pasting that one line isn’t how it’s done.

Additionally, does the COMMON CSS remain the same? Want to make sure the common CSS doesn’t conflict with the MOBILE CSS.

Thanks, @Simon_Cossar


(Simon Cossar) #6

You are getting that warning because that’s invalid CSS. You need to start it with the nav#bar selector:

nav#bar {
    top: -64px;
}

(Blu McCormick) #7

Thanks, @Simon_Cossar. That makes sense. One of these days I’d like to learn coding. Better than puzzles. So looks like MOBILE CSS takes priority over COMMON when applicable.

Changed it to -65 and it worked beautifully!

I have now got a nice working menu, and would like to do a new topic where I show the menu and then post the code so others can use it. I’d also acknowledge contributors and add links to the threads where the code was developed and hashed out. I’d like to pass on the help to others. Where would you suggest that I post such a thread?

[@ lll]


(Simon Cossar) #8

Great! #howto:tips-and-tricks would be a good place to post it.


Add horizontal menu to after header