Mobile Overlay Menu — Responsively Centering Button with Other Elements

Site URL: http://empiricalwisdom.com

Hello! 

I am attempting to restructure the layout of the mobile overlay menu by bringing the button up beneath the other nav links (effectively making it one clean list). By default, the button is displayed at the bottom of the screen, detached from the other nav elements. 

I was able to successfully move the button up beneath the other links by using the "bottom:" property, but this option is not responsive to changes in viewport height. Thus, when the height of the screen becomes smaller, the button begins to overlap the other nav links. See pictures below for example.

I'm hoping to make this change to the mobile menu layout more responsive, so that the button maintains its even spacing from the other links and never overlaps. Would greatly appreciate your help @tuanphan !

Thanks in advance 🙂

The default mobile overlay menu layout (button displayed at bottom):

The spacing I'd like to maintain responsively:

The current unresponsive effect of my code when the viewport height becomes shorter:

Use this CSS

.header-menu-cta {
    position: relative;
    top: -100px;
}

16 hours ago, tuanphan said:

Use this CSS

.header-menu-cta {
    position: relative;
    top: -100px;
}

 

Hi @tuanphan! Thanks so much for your response.  The code you provided above does help solve the overlapping, but I still can't get the button to responsively sit at even spacing with the other nav links. Is there any way to have the button act as if it were one of the main navigation links and always maintain uniform spacing with the others, even at various screen heights? I know it's in a totally separate div, so maybe it's not possible. Either way, thank you very much for all the help 🙂

11 hours ago, tkennedy7 said:

Hi @tuanphan! Thanks so much for your response.  The code you provided above does help solve the overlapping, but I still can't get the button to responsively sit at even spacing with the other nav links. Is there any way to have the button act as if it were one of the main navigation links and always maintain uniform spacing with the others, even at various screen heights? I know it's in a totally separate div, so maybe it's not possible. Either way, thank you very much for all the help 🙂

You can add a Link Item to Navigation, then we will give the code to turn this link item to button style.

On 1/26/2022 at 4:34 AM, tuanphan said:

You can add a Link Item to Navigation, then we will give the code to turn this link item to button style.

@tuanphan that's an amazing idea!! Thank you. I've managed to add it as an external link, hide it on desktop view, and hide the button on the mobile menu. Can you please help me with targeting just the "Enroll" link now to add the button styling? Thanks so much again 🙂

On 1/27/2022 at 12:19 AM, tkennedy7 said:

@tuanphan that's an amazing idea!! Thank you. I've managed to add it as an external link, hide it on desktop view, and hide the button on the mobile menu. Can you please help me with targeting just the "Enroll" link now to add the button styling? Thanks so much again 🙂

Add this CSS

div.container.header-menu-nav-item:last-child a {
    border: 2px solid black !important;
    background-color: black;
    color: white !important;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
}

1 hour ago, tuanphan said:

Add this CSS

div.container.header-menu-nav-item:last-child a {
    border: 2px solid black !important;
    background-color: black;
    color: white !important;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
}

 

Thank you so much!!! You are an absolute savior. And, I've learned a lot from you. Have a wonderful day