WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Menu jumps up/right at 1830px (7 posts)

  1. chappie
    Member
    Posted 8 months ago #

    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?

  2. Andrew
    Forum Moderator
    Posted 8 months ago #

    Let's see your site

  3. chappie
    Member
    Posted 8 months ago #

    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?

  4. rdellconsulting
    Member
    Posted 8 months ago #

    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) {
    }
  5. chappie
    Member
    Posted 8 months ago #

    @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...

  6. chappie
    Member
    Posted 8 months ago #

    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.

  7. chappie
    Member
    Posted 8 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic