Reputation: 289
I'm trying to make a horizontal navigation bar that has some menu items in a browser but condenses down to a hamburger menu if used on a mobile or other smaller device. I've been having a lot of trouble with actually removing the menu items and adding them to the hamburger menu. Any help would be greatly appreciated.
sample HTML:
<div class="navbar">
<a href="#First Name">First Name</a>
<a href="#Projects">Projects</a>
<a href="#Resume">Resume</a>
<a href="#About">About</a>
</div>
sample CSS:
.navbar {
overflow: hidden;
background-color: #ECECEC;
width:100vw;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: flex;
color: #474243;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 150%;
font-family: 'Roboto', sans-serif;
}
.navbar a:nth-of-type(1) {
/* padding-right: 680px; */
color: black;
margin-right: 680px;
padding-left: 50px;
/*background: #777; */
font-size: 200%;
font-family: 'Roboto', sans-serif;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
@media (max-width: 952px){
navbar a{
font-size: 16px;
}
}
Upvotes: 0
Views: 97
Reputation: 370
You can use the @media query. Here's some examples and guidelines https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Upvotes: 1