How to Reposition and Shorten the Navbar CTA on Small Screens

Sometimes the top Navbar can get a bit crowded, so on mobile devices you can reposition the CTA out of the Navbar using CSS code.

Sometimes the top Navbar can get a bit crowded, so on mobile devices you can reposition the CTA out of the Navbar and have it hover at the bottom right of the window.

Please add this CSS to do this:

@media only screen and (max-width : 768px) {  .super-navbar__cta { /* hide the original CTA Button */    position: fixed !important;    bottom: 20px !important;    right: 20px !important;    visibility: hidden !important;  }  .super-navbar__cta:after {    content: "Join us" !important; /* **** Edit the words for the small button **** */    background: var(--navbar-button-background-color) !important; /* **** set the background color **** */    color: var(--navbar-button-text-color) !important;    /* **** set the color **** */    padding: 5px !important;    padding-left: 15px !important;    padding-right: 15px !important;    border-radius: var(--cta-border-radius)!important;    border: var(--cta-border)!important;    box-shadow: var(--callout-shadow)!important;    visibility: visible !important;}}

You should edit the content for the button that you want, as well as make sure that the button colors are correct.