[Resolved] Responsive sticky menu behavior

Home Forums Support [Resolved] Responsive sticky menu behavior

Home Forums Support Responsive sticky menu behavior

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #578691
    Ivo

    Hello, I`m experiencing menu behavior issues with responsivity.
    If I`m on top of the page, everything works fine, but when scroll down, so Sticky menu will apply, then there is some weird reordering during window resizing.
    Let`s say desktop version is fine, but about aprox. 900 px wide, when menu items colapses to the MENU button, this button is centered in row below the logo.
    When resizing window to aprox. 700 px wide, the order is fine again.
    Can you please help me to figure out that 900 px stage?
    Thank you!

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #578733
    David
    Staff
    Customer Support

    Hi Ivo, give this a shot:

    @media (max-width: 922px)
    #sticky-navigation .menu-toggle {
        display: inline-block;
        clear: none;
        width: auto;
        float: right;
    }
    #580518
    Ivo

    Thank you it works! πŸ™‚
    Can I ask you second question?
    When on top of the page, responsive menu colapses at 922 px to the order where the logo is centered and menu button is below.
    Is there some settings to have it in one row – logo on left and menu button on right? It will give some screen space for the content.
    I was looking hard for it in Customization but wasn`t able to find that.
    Thank you very much!

    #580613
    David
    Staff
    Customer Support

    Hi Ivo,

    the simplest way would be to remove the site logo from the site identity. And then add a logo to Layout > Primary Navigation. Note, that the size of the logo will be controlled by the height of the navigation menu.

    #580648
    Ivo

    Thnak you, it made the trick,but now the logo is “glued” to the navigation.
    I would need the logo on the right side.
    Also similar problem like my first question appers – about 900px wide, themenu button is centered below the logo. When resizing back to full width, logo jumps above the navigation, which is pretty weird πŸ™‚
    Can you help me with this please?

    #580658
    David
    Staff
    Customer Support

    Hi Ivo, in the Customiser > Layout > Primary Navigation > Navigation location can you set this to below header?

    #580693
    Ivo

    That`s it!
    Thank you very much, marking as resolved.
    Have a nice day.

    #755612
    JURE

    Hi everybody,
    I’m building my very first website, with GP Premium & Elementor free. View on tablet ( vertical position ) and even more on the phone…it’s a mess. If I change ”responsive” settings, a PC screen gets messed up. I think I set the whole page dimension wrong. Any tips how actually to set dimensions of the 1st page and than go on ? Or actually, how to set ”canvas” to avoid problems with responsive views ?
    The site is : https://www.careforskin.eu
    Thanks in advance to anybody with some directions for me πŸ™‚

    #755637
    David
    Staff
    Customer Support

    Hi there,

    this is really a topic you might want to raise on the Elementor Facebook Community. But as a note – Elementor controls the resposive settings of the page, not GP. It looks like you have used padding to create space between your column contents on desktop. You will now need to edit those settings for tablet and mobile by switching to the responsive view and changing them to suit.

    #755658
    JURE

    Hi David,
    thx for a quick reply. Oh I see, my issue is with Elementor…I’ll go search knowlege on FB Comm. as you suggested. Just one more thing, please, when I edited paddings and font sizes in Tablet or Phone Responsive mode and updated/saved page, the PC screen got messed up too ? Shouldn’t the settiings made in Tab or Phone mode only be visible on Tablet ref. Phone ? Yust short yes or no will do, so I’ll know where and how to look up the solution…

    #755668
    David
    Staff
    Customer Support

    Whilst in responsive view the changes you make should only effect that device. Just make sure the little icon next to the setting is showing the right device.

    I provided some basic advice here regarding setting up your workflow:

    https://generatepress.com/forums/topic/merged-header-content-overlap-elementor/#post-755493

    #755681
    JURE

    Great, I think best is to make new front/home page and follow your last instructions, go from there, learn and redesign the page in a right way. Think if I go edit existing page, I’d mess up even more :).
    Thanks a lot !

    #755702
    David
    Staff
    Customer Support

    You’re welcome πŸ™‚

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