The adventure of me building my portfolio website. Early stage, soon to be updated.

So basically my nav keeps disappearing on mobile browsers and when I minimize the desktop browser.

So this my nav in HTML:

				<nav id="nav">
					<ul>
						<li><a href="#project" class="active">Current Project</a></li>
						<li><a href="#first">First Section</a></li>
						<li><a href="#second">Second Section</a></li>
						<li><a href="#cta">Get Started</a></li>
					</ul>
				</nav>`

And in CSS:

#nav {
	-moz-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
	-webkit-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
	-ms-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
	transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
	background-color: #ffffff;
	color: #636363;
	position: absolute;
	width: 64em;
	max-width: calc(100% - 4em);
	padding: 1em;
	background-color: #f7f7f7;
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
	cursor: default;
	text-align: center;
}

	#nav input, #nav select, #nav textarea {
		color: #636363;
	}

	#nav a:hover {
		color: #636363;
	}

	#nav strong, #nav b {
		color: #636363;
	}

	#nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
		color: #636363;
	}

	#nav blockquote {
		border-left-color: #dddddd;
	}

	#nav code {
		background: rgba(222, 222, 222, 0.25);
		border-color: #dddddd;
	}

	#nav hr {
		border-bottom-color: #dddddd;
	}

	#nav + #main {
		padding-top: 4.25em;
	}

	#nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

		#nav ul li {
			-moz-transition: margin 0.2s ease;
			-webkit-transition: margin 0.2s ease;
			-ms-transition: margin 0.2s ease;
			transition: margin 0.2s ease;
			display: inline-block;
			margin: 0 0.35em;
			padding: 0;
			vertical-align: middle;
		}

			#nav ul li a {
				-moz-transition: font-size 0.2s ease;
				-webkit-transition: font-size 0.2s ease;
				-ms-transition: font-size 0.2s ease;
				transition: font-size 0.2s ease;
				display: inline-block;
				height: 2.25em;
				line-height: 2.25em;
				padding: 0 1.25em;
				border: 0;
				border-radius: 8px;
				box-shadow: inset 0 0 0 1px transparent;
			}

				#nav ul li a:hover {
					background-color: rgba(222, 222, 222, 0.25);
				}

				#nav ul li a.active {
					background-color: #ffffff;
					box-shadow: none;
				}

	#nav.alt {
		position: fixed;
		top: 0;
		padding: 0.5em 1em;
		background-color: rgba(247, 247, 247, 0.95);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		z-index: 10000;
	}

		#nav.alt ul li {
			margin: 0 0.175em;
		}

			#nav.alt ul li a {
				font-size: 0.9em;
			}

	@media screen and (max-width: 736px) {

		#nav {
			display: none;
		}

			#nav + #main {
				padding-top: 0;
			}

	}`

So, what happened;

I'm hosting the current project on a DO Ubuntu 20.04 server. As I was setting up an extra user to add to the servers FTP list, I pretty much revoked all the access possible by just using the sudo command wrong.

This resulted back in a pretty complex situation which looks like the following: Using the recovery boot to rescue all data to transfer to a new server.

I'm happy my security settings were set up pretty descent from the beginning. It results back in having a solution to recover in (estimated. 2 days )

Status: found myself a way to chroot into the files without having sudo permissions. Going to transfer all core-data by tomorrow so probably all data should be transferred completely by then.

I'll keep you updated!