Thanks for sending over the link Meghann. Here’s what I would do. Let’s replace the code in the Custom CSS box with this:
@media only screen and (min-width: 768px) {
#header-button {
position: absolute;
right: 0;
top: 90px;
}
#logo {
margin-top: 25px;
margin-bottom: 80px;
}
}
@media only screen and (max-width: 767px) {
#header-button {
width: 100%;
display: block;
text-align: center;
}
}
In that snippet, the margin-top and margin-bottom of the #logo will set the height of the header. Since the button is absolutely positioned, its size and margins won’t be considered when it comes to determine spacing. That’s why it’ll work best to adjust the logo.
You can move the logo around by increasing/decreasing the top and bottom margin there. You can also change the logo’s size to cause a change as well.
Those snippets are made to use media queries so they’ll only impact certain screen sizes. For smaller screens the button is set to be center aligned in the header.
Give that a shot and let me know if you have any questions or trouble.
Have a great weekend,
Bill