▼
Streaming live at 10am (PST)

100% wide drop down from hamburger menu

#1

With the rebranding, restructuring and now redesign of our company website, we want to be sure it works correctly across all devices and browsers. To date, I am very please with Webflow and the entire WF staff who have been very accommodating and quite helpful on a personal level.

We have our navigation in place - which converts to a drop down "hamburger" menu for tablet and phone. However, the drop down is not extending the full width of the page (which was our original plan) but after consideration, we would like it to be full width if possible.

Can someone take a look and tell me the shortest path to achieve this?

Our current website is a combination of 6 different websites and the change will need to be affected on all 6. Once we know how to do it on one, we can do it on the others, then re-publish, re-export and re-upload accordingly.

Thank you.

Here is my public "read only" share link: https://preview.webflow.com/preview/clf-test-glass-and-fabric-shades?preview=b89ee6a6440e66f97f7230198b827dd4

Here is the current live website, incomplete as of yet, but more in "sandbox" mode for texting purposes and quality control:
http://www.customlightingcompany.com

#2

Hi sethregan,
You have to change the following:

1 - Give a 100vw to the nav menu and remove the side margins on the positioning:

2 - Set the nav bar margins to 0:

3 - On the nav button apply a fixed width and set margins to auto:

4 - Finally, set the text style to center on the nav button:

This will be the result:

9.jpg765x732 113 KB

Hope this helps :wink:

#3

Thank you Nita. I am not seeing the option for "VW".

What do I select first so that VW shows up in the Width Drop Down for editing?

Thank you.

#4

You have to enter that manually.
Just type 100vw and hit enter, it will assume :slight_smile:

#5

Thank you...

OK I followed your directions. On tabled portrait, it looks good but on both phone, portrait and landscape, I'm getting some bad results. The menu is now off the page.

Screen Shot 2016-08-08 at 3.39.24 PM.png594x654 255 KB

#6

I assumed that doing this on the tablet view would "trickle down" to the phone views... it didn't.

So I went to each phone view and I set the positioning to 0 and got it to work ok.

#7

Nice :wink: I'm glad it worked.

#8

I hope so. Now I have to do the same on the 5 other sites :slight_smile:
Thx for the help.

#9

Can't get it to work on the next site...

https://preview.webflow.com/preview/clf-test?preview=7220fe6322592232a5cf417f896cc601

:frowning:

#10

Hi Seth,
Have you been able to settle this? On your preview link I see no problem.

#11

Yes it took a bit of trial and error but I managed it. The 6 different sites I combined had some different things going on which couldn't use the exact same solution.

TY again for your help.

closed #12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.