CODEWITHSUNDEEP
htmlcss
timtommy
timtommy

Reputation: 289

How can I make my navigation bar resize using HTML/CSS only?

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

Answers (1)

ObscurusLux
ObscurusLux

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

Related Questions