▼
Streaming live at 10am (PST)

Design issues with navbar‏

#1

Hello,

I have a few questions for you:

  1. Currently (in desktop-mode only) when I scroll down past the first section of my site the "Scroll-Navbar" will popup on top. How can I make this happen for tablet/mobile screens also?

  2. When I scroll to the Introduction section I want my "Introuction" link in the Scroll-Navbar to be highlighted (as it's the Current section)...I know my Intro section is short but how can I fix this? Seems like the offset is causing this issue as the section is so short.

https://preview.webflow.com/preview/library-2?preview=14e574c9400365ba21c47ed875f40074

#2

Hey @rhami,

So to answer your questions:

  1. The issue is that the scroll header is set to invisible on tablet and mobile views:

and it should be:

Which will fix the issue :slightly_smiling:

In terms of the second issue, the way that the highlighting works it that it highlights when the section covers more than half the screen, so the intro section gets highlighted when it's supposed to, one thing you could do to fix this is set the link to an element within the intro section a bit lower down, which would avoid the issue but mean that it scrolled to that section when clicked which is kinda annoying. I have a really, really complicated workaround for this but it's long and mangled so if you want it message me :smile:

Let me know if this helps,

Arthur

#3

Great thanks Arthur!

The menu now shows up in mobile devices however when I click the hamburger icon nothing happens...

#4

@Arthur any idea as to why nothing happens when I click the hamburger icon in the "Scroll Navbar"?

#5

Hi @rhami, I took a look at the styling on the navbar, and I suggest to set the Scroll Header class to overflow visible, and to set the mobile nav menu div to be set to display inline.

I have created a quick video:

http://www.youtube.com/watch?v=7lw2bKWJm2I

I hope this helps!

#6

Awesome thanks so much!

closed #7

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