Mobile Display of Menu & Site Title


#1

I have mined CSS snippets here that have fixed some mobile display issues.

If possible I’d like to get that site title and the mobile menu burger to align nicely by moving the menu burger up. Could you have a look at the existing CSS I’ve added and suggest a fix if doable? Many thanks.

@media only screen and (max-width: 767px) {
 .site-description {
     display: none;
 }

}
@media only screen and (max-width: 767px) {
header#masthead div.col-md-4.col-sm-8.col-xs-12,
header#masthead div.col-md-8.col-sm-4.col-xs-12 {
width: auto;
}

header#masthead div.col-md-8.col-sm-4.col-xs-12 {
    float: right;
    padding: 10px 30px;
}

header#masthead nav#mainnav-mobi {
    left: -194px;
    width: 250px;
}

}


#2

Hi,

Here is to move up/downward the burger menu in mobile screen:

.btn-menu {
    margin-top: -20px;
}
@media (min-width: 768px){
    .btn-menu {
        margin-top: -5px;
    }
}

#3

That CSS brings joy to my world. Thanks!