how do i position my nav element under my header element?
Question
I want my navigation to be under my 'Acme Web Design' header whenever I view it on a mobile device. All my elements are positioned in the correct place for a laptop screen but when I check if it is responsive, they don't position at the place where I want them to be.
Here is what my header looks like in a responsive view.
This is the HTML and CSS file i used.
.headerdiv { display: flex; justify-content: space-between; align-items: flex-end; } /* Header */ header{ background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 30px; min-height: 70px; } nav { float: right; margin-bottom: 30px ; } nav a { color: white; text-decoration: none; padding: 10px; }
<header> <div class="container"> <div class="headerdiv"> <h1>Acme Web Design</h1> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </div> </header>
This is what I want my header to look like
4 answers
solution1
0 2018-11-10 18:45:43
Change your flex settings for the container as follows (especially flex-direction: column; ), use text-align: center for the child elements of .headerdiv to center them and delete the floats to include all elements in the parent element/background
Oh, and put those extra rules in a media query to leave your desktop view untouched - the snippet below only shows the mobile view, no media queries (since you didn't have any in your code)
headerdiv { display: flex; flex-direction: column; } .headerdiv>* { text-align: center; } /* Header */ header { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 30px; min-height: 70px; } nav { margin-bottom: 30px; } nav a { color: white; text-decoration: none; padding: 10px; }
<body> <header> <div class="container"> <div class="headerdiv"> <h1>Acme Web Design</h1> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </div> </header>
solution2
0 2018-11-12 05:24:16
Change your css property of class .headerdiv and remove nav class.
.headerdiv {
text-align: center;
margin-bottom: 30px;
}
/* Header */
header {
background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 30px;
min-height: 70px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
solution3
0 ACCPTED 2018-11-12 05:33:33
I guess this is what you were trying to achieve. Here is the working Codepen Link
body { font-family: sans-serif; } .headerdiv { display: flex; justify-content: space-between; flex-direction: column; align-items: center; } .headerdiv h1 { margin-bottom: 20px; font-size: 32px; font-weight: bold; } .headerdiv h1 span { color: #e7491c; } /* Header */ header { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 30px; min-height: 70px; } nav { margin-bottom: 30px; } nav a { color: white; text-decoration: none; padding: 10px; font-size: 20px; font-weight: bold; } nav a.active { color: #e7491c; }
<header> <div class="container"> <div class="headerdiv"> <h1><span>Acme</span> Web Design</h1> <nav> <a href="index.html" class="active">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </div> </header>
solution4
0 2018-11-12 06:04:55
try this.. you will get same result in any device.
if you want to increase the size of the menu u can do that using font-size..
headerdiv { display: flex; justify-content: space-between; align-items: flex-end; } /* Header */ header{ background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 8px; min-height: 70px; } nav { /* float: right; */ text-align: center; margin-bottom: 30px ; } nav a { color: white; text-decoration: none; padding: 10px; }
<header> <div class="container"> <div class="headerdiv"> <div> <h1 style="text-align: center;">Acme Web Design</h1> </div> <div> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </div> </div> </header>
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.