Support » Theme: Customizr » Menu jumps up/right at 1830px

  • Resolved chappie

    (@chappie)


    My main menu sits in a conventional spot, aligned left with nothing above or to the right (social icons and tagline have been removed, along with the menu box/shadow). And I’ve just noticed that when my viewport reaches an extreme width (at around 1830px n a 1920px screen) the whole menu jumps to the top right – into the spot previously reserved for the tagline. What could be pushing it around?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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;

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menu jumps up/right at 1830px’ is closed to new replies.