On mobile and desktop, when clicking 'SERVICES' drop down menu, it selects the 'Rail' option automatically

Question

I have been trying to make my header responsive and am really struggling with the 'SERVICES' dropdown section when it is in the collapsible menu. Not only does it look terrible with the 'static' position but I cant figure out another way of doing it.

I also am having an issue that when you click the 'SERVICES' button while below 768px it is automatically selecting the first option ('RAIL').

I hope this makes sense. I have linked the codepen below.

enter code here Codepen

header {
    background: linear-gradient(to right, #212529 0%, #495057 100%);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    width: 100%;
    height: 80px;
    padding: 10px 2% 10px 2%;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    z-index: 100;
}

header ul {
    margin-block-end: 0;
}


header li, a {
    font-weight: 300;
    font-size: 1em;
    color:#ced4da;
    text-decoration: none;
    
}


.logo-header {
    max-height: 50px;
    cursor: pointer;
    padding: 0 15px;
}


.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links li {
    display: inline-block;
    padding: 0px 40px;
}

.nav-links li a {
    transition: all 0.3s ease 0s;
}

.nav-links li a:hover,
.nav-links li a:active {
    font-weight: 500;
    transition: all 0.3s ease 0s;
    color: #f8f9fa;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.social-icons {
    display: inline-block;
    padding: 0px 15px;
    
}

.social-icons a {
    margin: 0px 20px;   
    transition: all 0.3s ease 0s;


}

.social-icons a:hover {
    transition: all 0.3s ease 0s;
    color:#f8f9fa;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
  
}

.sticky + .services-title h1 {
    padding-top: 80px;
}

.sticky + .main-home {
    padding-top: 80px;
}

.sticky + .container-contact {
    padding-top: 80px;
}

.dropbtn {
    background-color: inherit;
    color: #ced4da;
    padding: 0 40px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    height: 80px;

  }

  .dropbtn:hover{
    font-weight: 500;
    transition: all 0.3s ease 0s;
    color: #f8f9fa;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }

  .dropdown-content {
    position: absolute;
    background:#343a40;
    min-width: 160px;
    overflow: auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    text-align: center;
    display: none;

  }
  
  .dropdown-content a {
    padding: 12px 16px;
    display: block;
    font-weight: 300;
    font-size: 1em;
    color:#ced4da;
    text-decoration: none;
  }
  
  .dropdown-content a:hover {
    font-weight: 500;
    transition: all 0.3s ease 0s;
    color: #f8f9fa;
    text-decoration: underline;
    text-underline-offset: 5px;
}

#home-header {
    position: fixed;
    top: 0;
    left: 0;
}

#nav-toggle {
    position: absolute;
    top: -100px;
}

nav .icon-burger {
    display: none;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
}

nav .icon-burger .line {
    width: 30px;
    height: 5px;
    background: #fff;
    margin: 5px;
}

/*=====media queries=======*/

@media only screen and (max-width: 768px) {

  
    .nav-links {
        justify-content: space-evenly;
        float: none;
        position: fixed;
        z-index: 9;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 100%;
        width: 100%;
        max-height: 200px;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.7);
        overflow: hidden;
        transition: all .5s ease-in-out;
    }

    header :checked ~ .nav-links {
        bottom: 0;
    }

    .nav-links .dropbtn {
        padding: 0;
        width: 100%;
        height: 20px;
      
    }

    

  .dropdown-content {
      position: static;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
  }

    nav .icon-burger {
        display: block;
    }

    nav :checked ~ .icon-burger .line:nth-child(1) {
            transform: translateY(10px) rotate(225deg);
            transition: all .5s ease-in-out;
        }

    nav :checked ~ .icon-burger .line:nth-child(3) {
            transform: translateY(-10px) rotate(-225deg);
            transition: all .5s ease-in-out;
        }
    nav :checked ~ .icon-burger .line:nth-child(2) {
            opacity: 0;
            transition: all .5s ease-in-out;
        }
}

/* Medium devices (landscape tablets, 769px to 1024px) */
@media only screen and (max-width: 1024px) {

    header {
     padding-right: 0;
    }

    #social-icons-header a {
        display:none;
    }    
}

user_9409101 · Answer

You can do the following:

When the dropdown is hidden, the height of the element including "Rail" and "Events" is set to 0. When hovering "Services", you can increase the height of the element. To have a smooth transition you can add transition property to the element, so the animation from 0 to full height is smooth.

I guess "Rail" is selected in the mobile view due to the fact that the cursor points to its section when opening the dropdown.

user_15148149 · Answer

thanks for that but I do understand the reason why it is happening and understand I can put a transition property o the element but what I would ideally love to happen would be for the 'RAIL' and 'EVENT' to come down as 100% block elements and push 'PORTFOLIO' down.

I want this to happen with the drop down menu when it is under 768px.

In relation to the 'RAIL' being selected in mobile view, again, I understand what is happening but am seeking advise on how to work around this and make it more user friendly

On mobile and desktop, when clicking 'SERVICES' drop down menu, it selects the 'Rail' option automatically

2 Answers