overlapping page logo in the navigation (too many tabs/li items)

[adeliktas]

When there are too many or too long page (li block) items, it gets pushed to the left overlapping the page logo. It would be great if it instead creates a second row for navigation tabs or any other solution.

Thanks in advance!

somewhat similar to #12

[Allamaris0]

Try:

	#header {
                background-color: #007b9d;
		background-image: -moz-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
		background-image: -ms-linear-gradient(top, #008ead, #007b9d);
		background-image: linear-gradient(top, #008ead, #007b9d);
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-ms-box-sizing: content-box;
		box-sizing: content-box;
		position: relative;
		margin: 2.5% 0 2.5% 0;
		padding: 0 40px 0 40px;
		border-radius: 10px;
		border: solid 1px #006e8b;
		box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
		min-height: 86px;
                display: flex;
                align-items: center;
			}

			#header h1 {
				color: #fff;
				font-size: 2.4em;
				letter-spacing: -2px;
				padding: 0 50px 0 10px;
			}

				#header h1 a {
					color: #fff;
					text-decoration: none;
				}

			#header nav {
				line-height: 84px;
				text-transform: lowercase;
				font-size: 1.3em;
				letter-spacing: -1px;
			}
                #header nav ul {
                    padding: 0;
                }

                #header nav li {
                    display: block;
                    float: left;
		outline: 0;
                    position: relative;
                }
                
		#header nav a {
                    	text-decoration: none;
			color: #fff;
			padding: 0 25px 0 25px;
			outline: 0;
		}

It should look like this

If it's not what you expect, then you can wrote to me on Discord (Adamantine#0458). I'm not a front-end developer and definitely I'm not good at UX stuff, but I can try to help you.

[adeliktas]

thanks that's a great help solving this issue!
I adjusted some parts for my needs

text-transform: lowercase; => text-transform: none;
#header {//padding: 0 40px 0 40px;
#header nav li {//https://stackoverflow.com/questions/13745347/make-whole-li-as-link-with-proper-html
display: block;
float: left;
outline: 0;
position: relative;
//display: inline-block
}

#header nav a {
display: block;
text-decoration: none;
color: #fff;
padding: 0 25px 0 25px;
outline: 0;
}

As of Design it would be nice if the logo stays in the first line and doesnt adjust in postition/height(without padding) when there is another row of menu

Example:

[Allamaris0]

Just delete align-items: center; and you can add some padding-top for #header h1

[adeliktas]

Solved thanks again to @Allamaris0