I lost almost 2 weeks aligning it vertically and Horizontally

Usually you would anchor the drop down to the parent’s position by creating a stacking context on the parent with position:relative but as you don’t have that structure then you probably need something like this.

.site-header{position:relative;}
.mobile-menu{
top:70px;
margin:0;
}
2 Likes

Although the problem is fixed now with your help, but I will be keen in exploring what you said in my next HTML developments. Can you please let me know iwth an example what you are refererring to in your above statement? Is their any “PEN” on codepen from where I can take clue and learn things.

If you had placed both the hamburger and the dropdown menu within the same parent then you could have set the parent to be position:relative and the drop down menu would be then be absolutely placed at top:100% rather than using top with a fixed px ‘magic number’ that only works assuming nothing else has changed. Top:100% would ensure the menu always starts at the bottom of the hamburger even if you change the hamburgers size at a later date.

Most dropdown menus are constructed this way so that you build in an automatic alignment.

1 Like

Hi @Novicedeveloper,

I tried Paul’s suggestion with Chromium Inspector and it fixes the problem. I also tried to improve the dropdown’s position when the header grow in height by a percentage length instead of the 70px:

.mobile-menu {
    top: 50%;
    margin: 0 0 0 -.6em;
}

Just my two cents. :slight_smile:

1 Like

Thank you so much sir.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.