[Resolved] menu navigation breakpoint

[liorsade8]

hi tom and staff,
how are u guys?
wanted to say i loooooooooooovvvve u guys and your amazing theme 🙂

please help me out with something.
first of all i think you should put a button on the customize somewhere where we could choose the breakpoint of the menu…. it will help adjust each site with the breakpoint from desktop to mobile in all of our sites, customize….
now, i want in all of my sites to have a code i can adjust it.
for example:
https://www.uplaw.co.il/
i want it to break at: 1376px and to be a mobile menu from that point…
instead of the primary navigation to break to 2 lines.
please help,
thanks

[liorsade8]

hi
i think i mannaged!!!
with this code (and adding some to align stuff) – please check and tell if i’m right..?
GREAT STUFFFFFFF TOM – LOVE U!!!

@media(min-width: 1350px) {
.inside-navigation {
padding: 0px 100px 0px 20px;
}
}

@media(min-width: 1376px) {
.inside-navigation {
padding: 0px 100px 0px 20px;
}
}

@media(max-width: 768px) {
.inside-navigation {
padding: 0px 0px 0px 0px;
}
}

@media(max-width: 1350px) {
.secondary-nav-aligned-right .secondary-navigation ul {
padding: 0px 20px 0px 5px;
}
}

@media(min-width: 1376px) {
.secondary-nav-aligned-right .secondary-navigation ul {
padding: 0px 7px 0px 5px;
}
}

@media(max-width: 768px) {
.secondary-nav-aligned-right .secondary-navigation ul {
padding: 0px 0px 0px 0px;
}
}

@media (max-width: 1376px) {
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block;
}

.main-navigation ul,
.gen-sidebar-nav {
display: none;
}

[class*=”nav-float-“] .site-header .inside-header > * {
float: none;
clear: both;
}
}

button.menu-toggle {
background-color: transparent;
width: 99px;
border: 0;
text-align: center;
}

[liorsade8]

hi
sorry but it’s not perfect… so i still need your help….
i made this code:

button.menu-toggle {
background-color: transparent;
width: 99px;
border: 0;
text-align: center;
}

width: 99px; so it could go up insted of being in the center…

BUT – WHEN I WANT TO WRITE A Mobile Menu Label
this is where it’s all goes to shit….
i still need some code to do both actions
either burger icon by itself
or burger icon with menu lable near it…
please help,

thanks

[Tom]

Hi there,

You should only need to do this: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Let me know 🙂

[liorsade8]

in this site of mine it’s working:
https://www.pninafrenkel.co.il/

will check in others…..
i need your help in: https://www.uplaw.co.il/
will update….. after checking.
thanks

[liorsade8]

hi tom
so in this site:
https://www.pninafrenkel.co.il/
when i just put your code – the problem is when i’m in large wide width (when scrolled down) the menu wont stick to right like in mobile size

please help,
thanks

[liorsade8]

hi
you know what,
i think i got it:
please check and help
in site:
https://www.pninafrenkel.co.il/

i’ve put another code that when in max-width: 1450px make the float to right.
is it FIXING IT?
IS NOW EVERYTHING OK WITH THE CODE?

@media (max-width: 1450px) {
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block;
}

.main-navigation ul,
.gen-sidebar-nav {
display: none;
}

[class*=”nav-float-“] .site-header .inside-header > * {
float: none;
clear: both;
}
}

@media (max-width: 1450px){
.menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle, .sticky-menu-logo .navigation-stick:not(.mobile-header-navigation) .menu-toggle {
display: inline-block;
clear: none;
width: auto;
float: right;
}
}

[liorsade8]

i also think i managed the site:
https://www.uplaw.co.il/
so it’s all perfect i think!
thanks

[David]

Hi Yael,

the site navigation looks good to me. When sticky the navigation menu hamburger sticks to the right. Until it reaches the breakpoint when the normal centered menu appears.

[liorsade8]

great.
so the job is done and it’s perfect!

also,
please can you check in mobile (i have cashe problems) if the
navigation of the site : https://www.uplaw.co.il/
is floating to the right?

i check my devices and yes.
only one device showes other wize.
also a picture could be great.
thank david

[David]

Hi Yael, this is on iOS

[liorsade8]

hi
i mean when u press the hamburger menu
please picture it while it’s pressed.
thanks

[David]

I updated the post above =)

[liorsade8]

excelleeennnttoooosss !
great.
everything is perfect!
love u guys@!
amazing theme!
thanks

[David]

You’re welcome glad we could help

[Author]

Posts