[Resolved] unexpected line break in sticky nav

[dasigna]

hi there,

another little issue with sticky navigation…
on a new project rebuilding a site wit GP i’ve initiated the mobile navigation earlier due to keep the appearance… firing at 1020px with toms code provided in the documents for mobile navigation.

this works great with one little exception: after enabling the search in navigation i am now experiencing an unexpected line-break in the sticky nav between 1020 and 768px where the hamburger icon is ‘falling down’ into a second line beneath the sticky logo at 1020px and returns to the left side of the search icon at 768px.

any idea how to fix this?

thanks in advance.

[Leo]

Hi there,

Any chance you can link us to the page? Thanks!

[dasigna]

… i’d love to – but its currently local – sorry.
some ideas anyway?

[Leo]

Hmm is it a similar problem this user is having? https://generatepress.com/forums/topic/menu-tablet-landscape-mode/

[dasigna]

… looks quite similar yes. but me having a search icon in addition that stays where it should belong. but my main nav is alright, it only occurs when sticky…
in priciple – same issue i assume 🙂

[dasigna]

update:

… after a little investigating also on the site mentioned in the thread above it seems to be the same issue. although its not occurring on my site while the main nav is showing… but the break between the custom breakpoint and the 768px phone width is likely the same.
when disabling the nav-search on my site the hamburger also appears in the middle, with the search, on it aligns left beneath the logo…
interesting enough: when disabling the menu logo this issue doesnt seem to be there!
no break, the hamburger aligns left as expected – search right side.
enabling menu logo it occurs again and hamburger breaks beneath first row with logo left and search right… aligning to the left side of the search icon at 768 px.
remember: only sticky! main nav is fine here …

sadly enough wasnt able to find the culprit up till now – but should be possible to replicate i assume.

[Leo]

Can you try this? https://generatepress.com/forums/topic/menu-tablet-landscape-mode/#post-339558

[dasigna]

unfortunately this case doesnt seem to help for my site, because it triggers the complete mobile header, not just the nav. which isnt wanted.

ill try to explain again:
settings are;
– sticky nav for desktop and mobile
– mobile header enabled
– search in nav enabled

so the desktop header shows down to 769px, only the nav triggers earlier at 1020px (tweaked with this code) – works.
from 768px the mobile header triggers (native function) – works

sticky nav on mobile (768 and below) works as expected.
sticky nav on desktop down to 1020 works as expected.

only (!) sticky nav between custom triggered point at 1020 and 769 shows the unexpected behaviour that the hambuger icon doesnt align besides the search icon but falls into a second line underneath the nav logo.

sadly still not able to provide a link to site due to local dev evironment…

any idea anyway?

[Tom]

Hmm, I would have to actually view the code unfortunately, as I can’t reproduce it.

Any chance you can throw it up on a live server quickly?

[dasigna]

… no chance to do so quickly 🙁
but have to publish the next days – maybe leaving it by now and the having the chance to have a look…

meanwhile i found, that there are some differences to the mobile nav related to the menu toggle…
in mobile.min.css there is

.nav-search-enabled .main-navigation .menu-toggle {
    text-align: right;
}

for mobile nav whereas its aligned ‘left’ later.
further theres

button.menu-toggle {
    width: auto;
}

for mobile whereas its width: ‘100%’ later.
if i uncheck the width 100% it jumps up to the right of the logo into the same line. changing 100% to something from 80 to 90% and align from ‘left’ to ‘right’ it moves near the search-icon.
so its definitely related to the ‘button.menu-toggle’ selector in some way – but not really getting into it.
(some custom tweaking obviously doesnt affect it… deactivated all and issue stays)
very strange.

–

EDIT:
if removing the nav-logo, the hamburger is in the same line… menu-toggle leftmost, search icon rightmost. clitch with nav-logo??? i am getting crazy 🙂

[Tom]

The width changes depending on if there’s other elements in the menu toggle area (to make room). Do you think that has something to do with the issue you’re having?

[dasigna]

hi tom,

tough one!
jep, the width change seems to be interfering… got it meanwhile by setting the toggle for the demanded screen-widths to:

@media(min-width: 769px) and (max-width: 1020px) {
  .sticky-enabled .main-navigation.is_stuck .menu-toggle {
    text-align: right;
  }
  button.menu-toggle {
    width: calc(100% - 110px);
  }
}

seems to work so far – dont know if thats the final (and correct) solution, but optically its o.k. for now.
i’ll give you a link to the site when its public, so you may have a look 🙂

thanks up to this point.

[Tom]

Sounds good! 🙂

[Thomas]

Apologies if its bad etiquette to piggy back on this thread. I think I’m having exactly the same issue as above: website link

I have sticky nav for desktop and mobile, primary navigation logo, I’ve disabled the header, and I’ve got the nav search on. I’ve set the mobile breakpoint at 960px using Tom’s code and now between 960px-769px, the menu hamburger appears under the logo when I want it right. At 768 it behaves correctly and returns to the right, inline with the logo.

With the nav search off, the burger appears centred, but still below the logo, exactly as designa experienced above.

I’ve tried adding designa’s code with a tweak for my breakpoint, but still no joy:

@media(min-width: 769px) and (max-width: 960px) {
.sticky-enabled .main-navigation.is_stuck .menu-toggle {
text-align: right;
}
button.menu-toggle {
width: calc(100% – 110px);
}
}

Any ideas? This has been driving me bonkers and because its my first website I’ve spent days trying to get my head round it.

Thanks!

[Tom]

Give this a shot inside your media query:

.menu-logo .main-navigation .menu-toggle {
    display: inline-block;
    float: right;
    clear: none;
    width: auto;
}

.menu-logo .main-navigation .mobile-bar-items {
    position: relative;
    float: right;
}

[Author]

Posts