Streaming live at 10am (PST)

Responsive navigation issues


#1

Hey there, question about the navigation menu - it doesn't appear to be responsive.

https://preview.webflow.com/preview/kubyenergy?preview=f99961f420b4e34dc7a6e4b2d6c96a41

It looks fine on desktop, the background is a transparent white, but when you shrink the screen size it turns to a dark transparent colour. This shouldn't happen and the alignment of the links doesn't line up properly. When you go to the mobile device size, the hamburger disappears completely and even when you open the menu through the dashboard the links are all over the place.

Initially, the menu was placed on the left side of the screen with a dark transparent background. Where it should have been a white. We added the dropdown menu and somehow it disappeared. I noticed the menu icon option in the dashboard, but when you enable the appropriate views for the phone, it doesn't work.

Thanks!


Here is my public share link: LINK
(how to access public share link)


#2

Hey @adster great question!

I took a peek at your site and noticed that you have the Google Tag Manager code inside of an HTML embed, you should be able to place that in the Custom Code section either sitewide or page level in the "Before tag" section. http://help.webflow.com/lesson/custom-code

As for the navigation on this site, it looks like the "Menu Button" component was removed from the Nav Bar element. You may want to start with a new Nav Bar element to rebuild the navigation on your site.

Ping me @Waldo once you've styled the desktop version of the new Navbar element (be sure to not delete the menu button component) and I can take another look to help walk you through the other breakpoints :smile:


#3

Heyy @Waldo, I have recreated the menu. The new menu is on the thanks page. When I go to preview the page and I click on the menu icon. The links don't show up, could you please give further direction?

Link to preview:
https://preview.webflow.com/preview/kubyenergy?preview=f99961f420b4e34dc7a6e4b2d6c96a41


#4

@Waldo Please ignore the last comment. Please just look at the landscape/portrait for smartphone the menu icon is cover by the menu how do you fix this?


#5

Hey @adster awesome! I took a look and saw that if you make the following changes it should resolve the issue:

(1) Set your responsive Nav to Top position:

(2) Set your styles back to Default on the Nav Menu element:

Please let me know if this helps, applying the same settings to the tablet version before should resolve the menu issue for it as well. :slightly_smiling:


#6

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