Menu Button right aligned

Hi Feralie

Please provide a link to your site…

Sorry! My site: https://1b1.087.myftpupload.com/

If you don’t already have a Child_Themes or a custom.css you should install a plugin like Jetpack then add the following to the custom css area

@media screen and (min-width: 44.375em) {
.site-header-main .site-branding {
    margin: 0 auto 0 0;
}
}

Hm, so it seemed to fix the button staying right aligned, but now when that button turns into the laid out navigation menu, it is no longer centered. How can you get the best of both worlds?

try changing it to

@media screen and (min-width: 44.375em) {
.site-header-main .site-branding {
    margin: 0 auto 0 0;
width: 100%;
}

if that doesn’t work then remove that width: 100%;

and add the following code

.site-header-main .site-branding {
width: 100%;
}

Hm it doesn’t seems to be working- is something thats already in there working against it? The code i had in there to start was:
@media screen and (min-width: 44.375em) {
.site-header-main .site-branding {
margin: 0;
}

.site-header-menu {
margin: 0 auto;
}

.primary-menu {
width: auto;
}
}

can you please send a screenshot highlighting what you mean as i thought you were talking about the non-mobile menu which now looks centered.

Not sure how to attached screen shots, but as of now- the menu button is still on the left when the iPad is turned narrowly.

Also what I was talking about before was that, when you gave me the first code it made it so the menu button was to the right, BUT my non mobile menu was no longer centered. I compared this staging site with the main site that I had centered the non mobile menu with already. So the fist CSS you sent did in fact get menu to the right, but at the same time off centered the non mobile menu.

ok but the code I sent should have fixed that – please create a screenshot and put a link to it (eg dropbox)

OK before i send the screen shot which code should i put in? also i already had this code there:

@media screen and (min-width: 44.375em) {
.site-header-main .site-branding {
margin: 0;
}

.site-header-menu {
margin: 0 auto;
}

.primary-menu {
width: auto;
}
}

should i replace the whole thing or just the top part?

Just all the code I sent you at the bottom of the css file

Please see https://drive.google.com/file/d/0Bw1JjuF-vEf4WWtONjNCNlI2WUk/view?usp=drivesdk – looks fine to me

here’s how it looks with the first code you gave me that kept the menu button but did not center the menu. I am showing you this one because when you sent me the adjusted codes after that they didnt keep the button to the right.
the code i put in was:

@media screen and (min-width: 44.375em) {
.site-header-main .site-branding {
margin: 0 auto 0 0;
}
}

link to screenshot:
https://1b1.087.myftpupload.com/screenshots-for-help/

under that first pic you will also see a pic of how things in general don’t line up sometimes. my header and the bandcamp set to auto width…

@salsaturation see what i’m saying?

Any news?