Hamburger Menu Icon and text allignment issue

Hello Webflow crew,

Can someone be so kind and view the link below because I am trying to figure out why my hamburger menu and text is positioned differently in the edit and preview mode?

What setting for the two do I need to implement in order for them to stay in the same postion yet be responsive at the same time?

Here is the link: https://webflow.com/design/webflow01?preview=1d937883fbd3c7adaac73d4e6f5faf1c

Thanks guys.

Your structure is a call for problems (: http://cl.ly/image/3c0K3p3R1k2g

Try again by putting everything into your container, I mean the icon, the text, the logo. So it will stay centered and in order. Make a block (div) for you menu icon + your “menu” text. Also put your icon in a link black so you get the hand cursor.

So in short, try this (and come back for more help):

make a container
drag a NAVBAR element in it
put your logo in the BRAND element
set your navbar to display the hamburger menu even in desktop mode
edit your navbar icon and add your “menu” text

then

create another container below the first one
put your 2 big text element in it and adjust their positionning

try that

@vincent great thanks for the advice will give that a go now and ket you know :slight_smile:

Steven

hey @vincent followed your instructions and worked a treat thank you, I do have a problem though with trying to place thr hamburger icon top right hand corner like this site does:

When i try to palce it top right hand corner i can only go so far as the right side edit bar is blocking my view, is there any way top hide it? I am full screen too on a 1920 x1080 screen.

Take a look and you’ll see what I mean:

https://webflow.com/design/webflowsept?preview=8ba1b0d9737133543cff941a11bc101e

oh! and if anyone care to help just in case vincent is away, great

thanks,

Steven

try this Google Chrome – Tapes