[Resolved] Responsive sticky menu behavior

[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!

[David]

Hi Ivo, give this a shot:

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

[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!

[David]

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.

[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?

[David]

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

[Ivo]

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

[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 🙂

[David]

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.

[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…

[David]

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

[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 !

[David]

You’re welcome 🙂

[Author]

Posts