Need help positioning navigation links in center of navigation container

Question

I am adjusting how my index.html looks through the media screen, and so far I created a hamburger toggle menu button that when clicked, a small menu slides from the side of the screen with the menu links. However, the menu links are not centered and I dont know how to move them more towards the left of the screen.

I tried many things to fix this, including text-align, justify content, positions, and tried switching other things around. Could this be an inheritance problem or how i formatted my code?

This is my first frontend project, so my code might be messy. And there might be some code that is not used (for elements other than what Im asking for help) so please ignore those lol

Thank you so much in advance for your time and help!!

Here is a screenshot of my problem: I want the "home","art","shop", and "info" to be in the center of the menu block (its suppose to be in).

Here is my FULL code:

HTML: index.html

    


  
    Emiry Straiff
    
    
    

    
    

 

    
    
    
  
    
    
    

  


  

  
  

  
  
  
  
  

  
  
  
    emiry straiff
    digital artist // illustrator  
  


  
    
    
    
  
  

  

  
    
      home
    

    
      art
    

    
      shop
    

     
      info
      
        about
        learn
        commissions
        contact
      
    
  

  
  



  

   
    
        
        
        
          
      




      
  
      
        
        
        
        
      
      © 2022 EMIRY STRAIFF

CSS:

html
{
position: relative;
min-height: 100%;

}

body
{
    background-color: #F4E9D6;
    margin: 0 0 60px 0;
    min-width: 360px;
}

#top_insta
{
    position:absolute;
}

#top_tiktok
{
    position:absolute;
    top: 25px;
}

#top_twitter
{
    position:absolute;
    top: 50px;
}

#top_youtube
{
    position:absolute;
    top: 75px;
}

#shopping_bag
{
    position:absolute;
    width: 35px;
}

.headerbar
{
    background-color: #F4E9D6;
    height:auto;
    width: 100%;

}

.headerbar_myname
{
    font-size: 60px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #FF9C9C;
}

.headerbar_myjob
{
    color: #9B6F6F;
    font-family: 'Montserrat', sans-serif;
}

.hamburger
{
    display: none;
    cursor: pointer;
}

.bar
{
    display:block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #FF6565;
}

.nav-link, .nav-link:hover, .nav-link:visited, .nav-link:active
{
    color: #FF6565;
    font-size: 25px;
    font-family:'Montserrat', sans-serif;
}

.dropdown:hover .dropdown-menu
{
    display:block;
    position: absolute; 
    inset: 0px 0px auto auto; 
    margin: 0px; 
    transform: translate3d(0.296875px, 40px, 0px);
    background-color: #F4E9D6;
    border: 0;
}

.dropdown-item, .dropdown-item:hover, .dropdown-item:visited, .dropdown-item:active
{
    color: #FF6565;
    font-family:'Montserrat', sans-serif;
}

.dropdown .dropdown-menu
{
    display:none;
}

.dropdown-menu>li>a:hover
{
    background-color: #f8d2d2 !important;
}

.dropdown-menu>li>a:visited
{
    background-color: #F4E9D6 ;
}

hr.under-nav
{
    position: relative;
    height: 20 px;
    width: 50%;
    margin:0 auto;
    border-top: 3px solid #FF6565;
    z-index: -1;
}

.resize-art
{
    width: 35%;
    height:auto;
}

.flex-container
{
    display:flex;
    flex-wrap: wrap;
    padding: 5px;
    flex-direction: row;
    border: none;
    flex-grow: 1;
}

.featured-content
{
height: auto;
display:flex;
    flex-wrap: wrap;
    padding: 5px;
    flex-direction: row;
    border: none;
    margin-bottom: 100px;
}


.flex-item
{
    flex: 1 0 250px;
    margin: 5px;
    box-sizing: border-box;
}


.footer
{
    position: absolute;
    bottom: 0;
    background-color: #ebaaaa;
    height:150px;
    width: 100%;
}

.footer_social-links
{
    position: absolute;
    bottom: 70px;
}


#foot_insta, #foot_tiktok, #foot_twitter, #foot_youtube
{
    margin: 5px;
}


#copyright
{
    font-family:'Montserrat', sans-serif;
    color: #884646;
}


#btnScrollToTop
{
    position: absolute;
    width: 100 px;
    height: 100 px;
    border-radius: 10 px;
    background: #ebaaaa; 
    cursor: pointer;
    /* border: none; */
    box-shadow: none;
    top: 3px;
    font-family:'Montserrat', sans-serif;
    color: #884646;

}

 #coming-soon
 {
    font-size: 40px;
    font-family: 'Montserrat', sans-serif;
    color: #FF9C9C;
 }


 @media screen and (max-width:815px) and (min-width: 360px)
 {

   /*  social media icons */
    #top_insta
    {
        position:absolute;
        top: 92px;
        left: 31vw;
    }
    
    #top_tiktok
    {
        position:absolute;
        top: 92px;
        left: 41vw;
    }
    
    #top_twitter
    {
        position:absolute;
        top: 92px;
        left: 51vw;
    }
    
    #top_youtube
    {
        position:absolute;
        top: 92px;
        left: 61vw;
    }

    /* shopping cart on right corner smaller to fit media window */
    #shopping_bag
    {
        position:absolute;
        width: 25px;
        top:10px;
        right: 10px;
    }

    .headerbar_myname
    {
        font-size: 245%;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        color: #FF9C9C;
    }

    /* Navigation visiblity */
    .nav
    {
        position:fixed;
        left: -100%;
        flex-direction: column;
        top:70px;
        background-color: #F4E9D6;
        width: 100px;
        text-align: left;
        transition: .3s;
        padding:0px;
    }

    .nav .nav-item
    {
        display: inline-block;
    }

    .nav.active
    {
        left: 0;
    }

    .nav-link, .nav-link:visited, .nav-link:active
    {
    color: #FF6565;
    font-size: 25px;
    font-family:'Montserrat', sans-serif;
    }

    .nav-link:hover
    {   color: #FF6565;
        font-size: 25px;
        font-family:'Montserrat', sans-serif;
        
    }

    .dropdown:hover .dropdown-menu
    {
    display:block;
    position: absolute;  
    margin: 0px; 
    background-color: #F4E9D6;
    border: 0;
    left:0px;
    width: 180px;
    text-align: center;
    }

    .hamburger{
        position: absolute;
        display:block;
        top: 10px;
        left: 10px;
    }

    .hamburger.active .bar:nth-child(1)
    {
        transform: translateY(8px) rotate(-45deg);
    }

    .hamburger.active .bar:nth-child(2)
    {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3)
    {
        transform: translateY(-8px) rotate(45deg);
    }
 }

JS:

function scrolltopFunction()
{
    document.body.scrollTop=0;
    document.documentElement.scrollTop = 0;
}

function test()
{
window.scrollTo({
    top: 100,
    left: 100,
    behavior: 'smooth'
  });

}


const btnScrollToTop = document.querySelector("#btnScrollToTop");

btnScrollToTop.addEventListener("click", function()
{

window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });

});

const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  nav.classList.toggle("active");
}
)

document.querySelectorAll("nav-link").forEach(n => n.addEventListener(
  "click", () => {
    hamburger.classList.remove("active");
    nav.classList.remove("active");

  }
)
)

Need help positioning navigation links in center of navigation container

0 Answers