Collapsed Nav - How can I make the drop down menu appear under 'Services' nav link when hover/click?

user_15148149 0
Viewed 23

When resolution is less than 768px wide, my nav bar collapses but I am having issues with the drop down menu within my nav. When I hover/click on 'services', the drop down menu pushes 'services' up and 'portfolio down' and honestly doesn't look very good. How can I have it where when you hover/click on 'services' that 'services' stays where it is and the drop down menu ('Rails' & 'Events') appears below it and just pushes down the 'Portfolio' link?

The biggest issue I am having is when viewed on mobile, when you click 'services' it auto selects the 'rail' link from the drop down because of the way it is positioned. How can I fix the position of the 'services' button so that the sub menu appears beneath it?

Here is my code below.

enter code here codepen

nav css-position drop-down-menu css html
1 Answers

This is happeing because you have given justify-content: space-evenly; to .nav-links so it's adjusting spacing according to the content.

Change it to justify-content: normal;, and give padding to lis for spaces.

@media only screen and (max-width: 768px)
.nav-links {
    justify-content: normal;
    float: none;
    position: fixed;
    z-index: 9;
    {...}
}
user_66707230
Related