That seems to do the trick!
I have not uploaded it to the link, but I did what you said and these were the additional things I had to do to get it working:
There was a gap and I tried several things to get rid of it. I ended up doing a -6pt margin and it took care of the gap between the logo and the navigation bar. Also, there was a second navigation bar that when I “inspected” the code on Chrome determined it was a “Mobile-header-navigation”. Below is the code I used to fix both of these. I only know enough about coding to get myself in trouble so could you tell me if either thing I did will have other consequences I don’t know about?
.nav-float-right .main-navigation {
float: none;
display: inline-block;
vertical-align: bottom;
margin-left: -6px
}
.nav-float-right .main-navigation.mobile-header-navigation {
display: none;
}
.site-branding,
.site-logo {
display: inline-block;
}Also, this is all under “@media (min-width: 769px) {” because I didn’t want to mess things up in any other mode.
It looks good but I’m concerned about using a negative margin because it just seemed too easy. Let me know if this is a good solution. Thanks!!