HTML/CSS nav bar spacing issues with flexbox
Question
Could not yet find this exact issue that I am having addressed, so it here goes:
I am trying to create a nav bar with a heading on the left-hand side, and some nav items on the right. I also want the nav to be centered on the page, with a width of 960px. I am trying to accomplish 2 additional things:
1.) The nav bar should be fixed to the top so that it does not disappear when you scroll.
2.) The spacing between the heading and the nav items should be the first to disappear when you minimize the screen. Currently, the items do not flex at all.
I am able to get one of these two things accomplished at a time, but not both at the same time. Any help would be most welcome, thank you.
html { font-family: helvetica; font-size: 18px; } .container { max-width: 960px; margin: 0 auto; } .banner { background-color: aqua; opacity: .5; border-radius: 10px; position: fixed; } .header { display: flex; justify-content: space-between; height: 4rem; align-items: center; width: 960px; } .container .banner .header h1 { margin-left: 2.5rem; } .container .banner .header .nav ul { display: flex; width: 200px; justify-content: space-between; text-decoration: none; margin-right: 2.5rem; } .container .banner .header .nav ul a { color: black; list-style-type: none; text-decoration: none; }
<div class="container"> <div class="banner"> <div class="header"> <h1>My Sweet Sweet Georgia</h1> <div class="nav"> <ul> <li><a href="#">doggy</a></li> <li><a href="#">puppy</a></li> <li><a href="#">toys</a></li> </ul> </div> </div> </div> </div>
2 answers
solution1
0 2017-11-17 05:41:56
You can use align-items: left for your heading and align-items: right instead of using margin
* { padding: 0; margin: 0; } html { font-family: helvetica; font-size: 18px; } .container .header { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; height: 4rem; align-items: center; width: 100%; position: fixed; background: aqua; opacity: .7; border-radius: 10px; } .container .header .nav ul li { display: inline-flex; }
<!DOCTYPE html> <html> <head> <title>My Puppy</title> <link href="./resources/reset.css" type="text/css" rel="stylesheet"> <link href="./resources/style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <h1>My Sweet Sweet Georgia</h1> <div class="nav"> <ul> <li><a href="#">doggy</a></li> <li><a href="#">puppy</a></li> <li><a href="#">toys</a></li> </ul> </div> </div> </div> </body>
solution2
0 2017-12-01 15:40:04
In your css file:
remove in .header
.header {
width: 960px;
}
add in .banner
.banner {
max-width: 960px;
width: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.