Nav bar from hell

Im Having some difficulty creating a nav bar for this dummy site. To be honest im not even sure where to start. When i try to add the nav bar, my previous elements get pushed to the left and once i try to style the nav bar more it just disappears. Im not sure what to do at this point so any pointers would help. Thank you. below is my code.

Styling:
@font-face {
font-family: ‘exwayer’;
src: url(/Fonts/exwayer-x3eqa-webfont.woff2) format(‘woff2’),
url(/Fonts/exwayer-x3eqa-webfont.woff) format(‘woff’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Future’;
src: url(/Fonts/futurelight-bw15w-webfont.woff2) format(‘woff2’),
url(/Fonts/futurelight-bw15w-webfont.woff) format(‘woff’);
font-weight: normal;
font-style: normal;

}

html {

font-size: 62.5%;

}

.runner {
font-family:‘Future’;
list-style-type: none;
display: flex;
color: white;
box-sizing: border-box;

}

nav {

background: violet
height: 60px;  
width: 100%;

}

nav ul {

float: right;
margin-right: 20px;

}

nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
.edge {

background: url(/Images/—Pngtree—retro\ cyberpunk\ style\ 80s\ sci-fi_1177659.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
display: flex;
justify-content: center;

}

h1 {
margin: 20px 0;
font-family: ‘exwayer’;
font-size: 7rem;
font-weight: 900;
text-transform: uppercase;
color: white;
text-shadow: 2px 2px 0 black;
}

p {

font-family: 'Future';

}

.punk {

justify-content: center;
align-items: center;

}

.cyber {

height: 100vh;
background-size: cover;
justify-content: center;
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
text-align: center;

}
.cyber .punk {

background: rgba(0, 0, 0, 0.6);
font-size: 2rem;
font-weight: 300;
letter-spacing: 1.5px;
padding: 1.5rem;
}

Please include the HTML as well

This is because there is a flex on the entire body.

1 Like

Thank you! so i should have flex on nav or just the Li elements?

I’m not sure the exact design that you are trying to achieve.

Did you try that?

I was just trying my hand at a basic navigation bar that resizes with the screen. i moved the flex element to the nav bar and it all reappeared correctly.