[Resolved] menu navigation breakpoint

Home Forums Support menu navigation breakpoint

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #574667
    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

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #574685
    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;
    }

    #574686
    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

    #574767
    Tom
    Lead Developer
    Lead Developer
    #575494
    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

    #576583
    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

    #576585
    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;
    }
    }

    #576589
    liorsade8

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

    #576590
    David
    Staff
    Customer Support

    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.

    #576592
    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

    #576594
    David
    Staff
    Customer Support

    Hi Yael, this is on iOS

    Image2

    #576595
    liorsade8

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

    #576606
    David
    Staff
    Customer Support

    I updated the post above =)

    #576617
    liorsade8

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

    #576618
    David
    Staff
    Customer Support

    You’re welcome glad we could help

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.