Menu jumps up/right at 1830px

Let’s see your site

I’m running offline so no links. But I sent Dave a webarchive file a while back.

@dave – if you’ve still got it, could you please stretch it to the max – over 1830px – and see the menu jump?

Yes, I can confirm it is doing what you say. I’ve not come across webarchives until you sent me this one. Is there any way to generate same for other browsers such as Firefox or Chrome?

I reproduced a set of @media extracted from {color}.css and can’t see anything that would break it at that point.

@media print {
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {

@media print {
}
@media (min-width: 1200px) {
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
}
@media (min-width: 480px) and (max-width: 767px) {
}
@media (max-width: 480px) {
}
@media (max-width: 979px) {
}
@media (min-width: 980px) {
}

/* Media queries */

@media (max-width: 1200px) {
}
@media (max-width: 979px) {
}
@media (max-width: 767px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

@dave – thanks for confirming. Bit of a mystery. When I re-activate the tagline by deleting this snippet, the problem disappears because the tagline is occupying the space that the menu wants to jump into:

‘
/* Tagline */
.navbar-wrapper .navbar h2, h2.site-description {
display:none;
}
`
Maybe there’s a different way to hide the tagline so that the menu thinks it’s still there?
—
AFAIK, all browsers can produce a webarchive or similar file incorporating all the code and graphics used in a page… With a web page open, choose Save As from the File menu and select the option – which is called Webarchive by Safari but other names (“Complete Page?) by different browsers.

Also, I think the resulting file can be opened in any browser by using the File>Open menu.

Handy when you need to show an offline page to someone far, far away…

As suspected, deleting my previous Tagline display:none CSS and instead making its text the same colour as the background does stop my main menu jumping up and right at wide 1820px+ viewports:

/* Tagline - keep but hide (prevents menu jumping up at 1820px) */
.navbar-wrapper .navbar h2, h2.site-description  {
color: white;
font-size: 0%;
padding: none;
margin: none;
}

I don’t think the other parameters (font-size, padding, margin) actually do anything useful when the text is invisible… I was hoping that they might reduce the re-activated white space between my logo and the 3-bar menu.

Perseverance paid: I was able to quite substantially reduce the white space between my logo and the 3-bar menu with margin: -10px;