Menu margins – flush right

Have you fixed this already? This is what I see when I visit your website. I don’t see any such overlapping as you describe.

Hi George,
I haven’t been able to check it on a larger display only laptop and devices. My display is 1440×900 Would like to at least at a conditional css to this but because the header elements are not marked up un the themes style.css I don’t have the knowledge to edit. If you know the workaround that would be great!

Thanks, Robert

… because the header elements are not marked up un the themes style.css

I’m not sure what you mean by this: if there is no markup for it, it can’t get styled at all. (It appears to me you’re using the phrase “marked up” in a different context than HTML markup, but what do I know ?? )

As you can see from the screenshot above, the menu on the right has the class header-menu. So you can add a right margin or padding within whatever responsive breakpoint context you want, eg:

@media screen and (min-width: 64em) {		
	.header-menu {
		padding-right: 30px;
	}
}

I consider this a “hack” at best and not an ideal solution, as it can have unintended consequences on other screen sizes. (A common pitfall I see all the time is people optimizing their websites for their own screens only!). See below what happens when I resize the screen just a little bit.

In my view, a better and proper approach should be to get the logo image to be truly responsive. Currently, two different images are used, and there is a hard cut over from one to the other. If you could get the bigger image to be truly response (ie dynamically change size as the screen size changes until it switches over to the smaller size), then there would be ample room for the menu and there would be no need for any fixed margin/padding on the right. (Unfortunately, I’m travelling now, and don’t have the time to dig into this for you. Sorry about there!)

Good luck, and stay safe!