How to make navigation bar fit all screen sizes in HTML and CSS?
Question
I want to make all buttons in my navigation bar styled using percentages. This is so that it'll look the same in different resolutions. However, for some reason, when I apply the percentages to the same button, some of them provide a different result and looks smaller. I am extremely confused and really need help as it's my ICT project.
I've attempted to make the all the paddings the same percentage, and everything of the sort
HTML:
.topnav{ overflow: hidden; background-color: #333; font-family: courier new; width: 100%; max-height:100px; } .topnav a { float: left; font-size: 16px; color: white; text-align: center; padding: 3% 2%; text-decoration: none; display: flex; margin: auto; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; background-color: inherit; font-family: inherit; margin: auto; } .dropdown a { padding: 3% 2%; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #1A93EE; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }
<div class="topnav"> <div class="dropdown"> <button class="dropbtn">About MUN <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="munpage.html">What is MUN?</a> <a href="munteam.html">The STCMUN Team</a> <a href="munprocedures.html">MUN Procedures </a> </div> </div> <div class="dropdown"> <button class="dropbtn">The UN <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="unpage.html">What is the UN?</a> <a href="unsustainablegoals.html">The UN Sustainable Goals</a> </div> </div> <a href="currentevents.html">Current Events</a> <a href="internationalaffairs.html"> International Affairs </a> <a href="others.html">Others </a> <a href="contactus.html"> Contact Us </a> </div> </div> </div> </div> </div>
I want all the buttons to be of the same size and styled using percentages. I also want the navigation bar to only be one text line in height. Please help!
2 answers
solution1
0 2019-02-17 13:57:37
The most appropriate way to approach responsiveness is leveraging on the power of media queries. Through this approach, you could resize your navigation bar to look exactly as you want it to look like across different screens. Learn more about media queries on MDN
Tip
You could hide the content on the nav bar on small screens and introduce sidebar which should be togglable.
solution2
0 2019-02-17 13:57:58
body,html {
margin: 0px;
padding: 0px;
}
.topnav{
overflow: hidden;
background-color: #333;
font-family: courier new;
width: 100%;
max-height:100px;
padding: 3% 2%;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
display: flex;
margin: auto;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: auto;
}
.dropdown a {
padding: 3% 2%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #1A93EE;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">About MUN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="munpage.html">What is MUN?</a>
<a href="munteam.html">The STCMUN Team</a>
<a href="munprocedures.html">MUN Procedures </a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">The UN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="unpage.html">What is the UN?</a>
<a href="unsustainablegoals.html">The UN Sustainable Goals</a>
</div>
</div>
<a href="currentevents.html">Current Events</a>
<a href="internationalaffairs.html"> International Affairs </a>
<a href="others.html">Others </a>
<a href="contactus.html"> Contact Us </a>
</div>
</div>
</div>
</div>
</div>
</body>
is it? if not, please draw the expected behavior so that I can better understand what you want
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.