Trying to get Navbar disappear when page shrinks

Question

I'm new to html and css and in my class my teach wants us to make a resume with bootstrap. Obviously the whole point of bootstrap is to be interactive in switching between devices. Im trying to work on aligning stuff and i want my navbar to disappear when I shrink the page. How could I do that?

HTML









CadenGS's Resume



    

    
    
    

    
        
            About
        
        
            Experience
        
        
            Education
        
        
            Skills
        
        
            Awards
        
        
            Examples
        
    



    
    .

    
    
        Caden Serrato

        
        
                (786) 442-6148 · @cserrato21352@columbushs.com
        

        I am a Senior High School Student looking to go into the Field of
                    Engineeing. My
                    goal is to dual major in Mechanical
        and Engineering, and
                    hopefully one day work at
                    Boston Dynamics.

        
        

            
            
                
                    
                        
                    
                
            

            
            
                
                    
                        
                    
                
            

            
            
                
                    
                        
                    
                
            

            
            
                
                    
                        
                    
                
            
        
    

    
    .

    

    

    
        
            Experience

        Robotics
        

        


        I started my first year as a simple
                    builder
                    as
                    I
                    learned the basics of Vex. My second year I was a bit more
         experienced and began
                    to
                    build
                    for advanced and
                    complicated
                    mechanisms. I built all year and ended up finishing 
        in 8th place at the
                    state
                    championship my team qualified for.

        
            
            Date: August 2018 -
                        Present

CSS

    height: 4000px;
    background-color: rgb(248, 248, 239);
}

html {
    background-color: rgb(248, 248, 239);
    scroll-behavior: smooth;
}

.navbar {
    background-color: rgba(63, 158, 253, .9);
    height: 100%;
    position: fixed;
    text-align: center;
    flex-direction: column;
    border-right: 9px solid rgb(168, 211, 255);
}

ul {
    display: flex;
    justify-content: center;
}

.nav-link {
    transition: all .25s;
    color: rgba(255, 255, 255, 0.726);
    font-size: 1.5rem;
}

.nav-link:hover {
    transition: all .25s;
    color: white;
    text-shadow: darkslategrey;
    font-size: 1.7rem;
}

#pfp {
    border: 9px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    height: 160px;
    width: 160px;
    position: static;
    margin-bottom: 20px;
}

#primaryName {
    font-family: 'Saira Extra Condensed';
    color: rgb(146, 146, 146);
    font-size: 6rem;
}

#secondaryName {
    font-family: 'Saira Extra Condensed';
    color: rgba(63, 158, 253, .9);
    font-size: 6rem;
}

#main {
    padding-top: 10%;
    margin-left: 7%;
}

.info {
    font-size: 1.7rem;
}

.info2 {
    font-size: 1.3rem;
    text-indent: 30px;
}

#top,
#exp {
    color: rgba(63, 158, 253, 0);
}

.infoLink {
    text-decoration: none;
    font-family: 'Saira Extra Condensed';
    color: rgb(110, 110, 110);
}

.infoLink:hover {
    color: black;
}

#emailLink {
    text-decoration: none;
    color: black;
}

.socialHolder {
    margin-left: 3%;
}

.socialLinks {
    height: 65px;
    width: 65px;
    border-radius: 50%;
    background-color: rgb(146, 146, 146);
    display: flex;
    justify-content: center;
    transition: all .25s;
}

.socialLinks:hover {
    transition: all .25s;
    background-color: rgb(75, 75, 75);
}

#gitSocialImg {
    border-radius: 50%;
    height: 55%;
    width: 55%;
    margin-top: 25%;
}

#igSocialImg {
    border-radius: 50%;
    height: 80%;
    width: 80%;
    margin-top: 11%;
}

#fbSocialImg {
    border-radius: 50%;
    height: 55%;
    width: 55%;
    margin-top: 22%;
}

#liSocialImg {
    border-radius: 50%;
    height: 55%;
    width: 55%;
    margin-top: 22%;
}

.pageBreak {
    border: 2px solid rgba(63, 158, 253, .9);
    width: 85%;
    margin-top: 4%;
    margin-right: 13%;
}

.subSectionName {
    font-family: 'Saira Extra Condensed';
    color: rgb(146, 146, 146);
}

.subSectionInfo {
    font-family: 'Saira Extra Condensed';
    color: rgb(110, 110, 110);
    font-size: 1.7rem;
    margin-left: 60px;
}

#experience {
    margin-left: 4.6%;
}

#aboveDate {
    border: 2px solid rgba(63, 158, 253, .9);
    width: 27.5%;
    margin-left: 6%;
    margin-bottom: -1%;
}```

Yaakov David · Accepted Answer

You can write a media query and than do display: none; on the element you want to disappear.

Example:

@media (max-width: 800px) {
  .navbar {
    display: none;
  }
}

Trying to get Navbar disappear when page shrinks

Answers (1)

Related Questions