tkennedy7

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

@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 🙂

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 🙂

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:

Leaving this up in case anybody else has this same problem. I fixed it by adding this code to each of the changes above: transition: .3s ease-out; For example: .tweak-fixed-header .shrink.header { background: #FFF !important; transition: .3s ease-out; } Hope this helps 🙂

Site URL: http://empiricalwisdom.com Hello! I am currently using the dynamic style sticky header and some CSS I found to customize the navbar on scroll for certain pages on my site. When first loaded, the navbar is transparent with white text. Then on scroll, the navbar gets a solid white background, and the site title + navigation links change to black. However, the color of the site title and nav links seems to change to black faster than the white background appears, which looks quite clunky. Does anyone how I can achieve a matching transition animation for both the white background and the changing text color so that it looks smoother? Would really appreciate any help 🙂 Here's the CSS I'm currently using: <style> .tweak-fixed-header .shrink.header { background: #FFF !important; } .tweak-fixed-header .shrink.header .header-nav-wrapper a { color: #000 !important; } .tweak-fixed-header .shrink.header #site-title { color: #000 !important; } #header.shrink .burger-inner>div { background-color: black !important; } </style>