This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Angie Marie
Posted Oct 26 - Read on Facebook

Hi! I am finally getting a working navigation bar module -- you can add items in the app and it should auto-size the navigation bar based on number of items. HOWEVER, I just can't figure out the right `x: _____` formula for making the navigation bar start in the left-hand side and build from there based on the number of items. I don't even know how much I want it to be spaced, but I can figure that out once I get it working properly. Currently I have `x: i * (defaults.screenWidth / itemCount)` which I took from another example. Here's a link to the prototype -- please feel free to offer any suggestions as well -- there's probably better ways to do this.

5 Comments

Angie Marie

Bump please! Could really use the advice! :)

Kevyn Arnott

What are you specifically struggling with? When there is only 1 tab are you wanting that to be on the far left instead of center?

Angie Marie

Hi! I would love for it to operate like a real navigation bar. So every time you add a menu item (home, about, etc.) it just is placed next to the previous one. Basically, a simple bootstrappy navigation like the screenshot. I want to be able to reuse this module for different web apps with the same style, but I'm not sure how to accomplish that. Right now it looks perfect in terms of y-placement, but the way it's written the tabs obviously go the entire screen width. I've been playing with it more and can get them to shift to the left, but still not quite what I want. Does that clarify it a bit more? Thanks!

Travis Hall

http://share.framerjs.com/zvlo3x8v0wrr/

I've commented the modules code with a brief explanation of the additions. Basically set a new variable to store the Xposition, then update the width of the layer depending on it's contents (text and style), then update the xPosition with the layer width

Angie Marie

Thank you again everyone for your input! I have a question that I feel like should be obvious, but I can't get it to work. I want to add a bottom-border of "1px solid #DEE2E3" but I cannot for the life of me get it to show up. What am I missing? I tried adding it after this part in the module in the screenshot, but it doesn't hit.

Read the entire post on Facebook