Streaming live at 10am (PST)

Navbar Open Menu Help Needed!


#1

Hi all,

I’m Ryan. I’m a freelance designer & have recently jumped on the Webflow train! I’m currently developing a site for one of my clients but am facing an issue with the open hamburger menu styling. Please take a look at the photo attached:

So on the left is the site. On the right is a quick mockup I created to showcase what I’m trying to do. I want to restyle the navbar when the menu is open. But unfortunately, I can’t figure out how to do this effectively!

This is my first post on the Webflow Community- but from reading a few other posts, I hope that you can help me out. It would be much appreciated! I’m looking forward to reaching out & talking to some of you about this Webflow journey!

Until then, stay fresh!

Ryan :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

You welcome :slight_smile:

Your mission “separate” into five groups:

  1. Logo in white (inside the overlay put the logo with same size/position) (This is for seperate Q)

  2. Full width/height overlay background (by position absolute & z-index or by 100vh)
    Full screen Navigation Menu
    Fullscreen navbar layer

  3. Hamburger white + enlarge
    https://university.webflow.com/article/menu-button
    see about z-index
    Help creating full-screen mobile nav

  4. Big links + center
    (No tutorial this is by simple CSS - play with margins/font size and so on)
    https://university.webflow.com/article/navbar

  5. "lets talk" button + round corners
    https://university.webflow.com/article/border-radius

Look/learn from the structure of pro templates:

-or- workshops

Try this (use the links i added) than add “read only link” + relate Q


#3

Hi @RyanHayward

Welcome to the Webflow Community. Definitely a great place to stick around a learn loads.
If you could share your read only link, it’s a great way of us being able to edit your site and show you how to modify it in the necessary way without saving the changes.

@Siton_Systems has given you some great links. I’m guessing you’re struggling with the actual placing of this inside the nav menu when it’s open?

Let me know if you still need some help with this.