Streaming live at 10am (PST)

Disappearing Nav Bar


#1

Hello,

I'm trying to figure out what's happening in the screen capture video I made, in this link:

Below is the read only link to the work in progress.

https://preview.webflow.com/preview/scindoyan?preview=b1d44ed1a23922be13a8c9df48902a91

In addition to solving this issue, which probably has something to do with either the Navigator structure,
or perhaps some Class settings, I'm also hoping to get help with my basic concept, which I've been struggling
with. The basic concept is that the NavBar, which is meant to have menu categories aligned with the right edge
the page, and logo aligned with the left edge of the page, should be fixed, as if always on top of everything when
scrolling the page. The panoramic photo of the ocean is meant to be fixed as a background, always beneath every
section and content that would scroll on top of it. If anyone can give me a simple step by step instructions on how to achieve this concept, that would be really helpful.

Thanks.


#2

Hi @elcalibano, Good question! You'll likely be able to achieve this with a fixed position navigation and ensuring it has a higher z-index than it's siblings.

Also, for the background image, try placing all of your body elements in a divblock and assign the background to the divblock instead of the body.

Note: be careful when using the same class names on nested elements (sometimes causes strange results)

Hope this helps smile


#3

First of all my eyes are bleeding from 1000px margin on container that is also float: right;. Why don't you just drop navbar from widget menu, and look in the navigator panel. You will see that there is structure like

- navbar
- - container
- - - brand
- - - navmenu

You can simply drag&drop items out of that container and remove empty container so the structure will be like:

- navbar
- - brand
- - navmenu

Would that solve your problem?


#4

Very funny about the bleeding eyes, Bartek. I will freely admit I don't really know what I'm doing at the moment, as I'm new to web design and webflow, so I'm making a lot of mistakes, especially when it comes to positioning elements, and probably navigator structure. I got it working for now, which I believe I did by deleting and starting from scratch. I had used a navbar widget initially. Is there a webflow page or tutorial or video on positioning that really explains how to position anything wherever you want? So far, with my limited knowledge, things don't seem to do always do what I expect them to do.

I don't know if there are bugs or if it's my ignorance. For example, just now, I added a new section, and then added a div block to the section, added a class, made it 40 pixels wide, and colored it red. I positioned it float right, and in the working view I see the red square. I select all the different device sizes and there's the red square on the right edge. When clicking the preview eye, no red box, in any device size. Or, I add a button, and when I hover over it in the working view, an underline appears beneath the button text. When I look at it in preview mode, no underline. So, I'm still confused by a lot of things at this point.


#5

It's not disappearing. You have your navbar as position: fixed; and the heading simply hides beneath it smile Remember to have a margin-top for the second section big enough to push from the navigation bar you have at the very top. I'd recommend to set the margin-top size to the height of the navbar.

Regarding tutorials you should watch all of videos on http://tutorials.webflow.com/. It will give you the kick you need to create awesome websites :) Team at Webflow did their best to give you best tutorials :)


#6

Bartek, I think you're wrong. I deleted everything on my page, and removed all styles in the style manager tab to start from scratch to show you what I'm seeing in the screen capture video below. And yes, I've watched the tutorial videos. They are helpful, but they are not as comprehensive as I'd like, which is why I wish that the support was stronger. I'd say if I had to learn this on a job deadline, it wouldn't work at all due to the time lag in support. Anyway, here's the video:

Perhaps you can explain to me what's happening.


#7

PS, if the video doesn't load in the forum window, as it seems not to be working for me for some reason, then you can right click on the bar, and select open in a new window and that should work.


#8

Hi @elcalibano, That's a great question - and we're definitely open to feedback regarding this.

But the reason the elements disappear in preview mode (from your video above) is because they are empty. We add a height to the element so you can see them in "design mode" but since they are empty, they disappear.

Hope this helps! smile


#9

Well, I don't know if that's the expected behavior by seasoned web designers, but as a noob it doesn't make sense to me.

I thought I could use Div Blocks and Containers to create visual assets on my page, first of all. So, if these are invisible in preview mode if they are empty, then what can I use to make colored boxes on my page, especially container-sized boxes that go across the whole page? In addition to any answer here, can you point me to the exact video or documentation that explains how to make colored boxes to use as design elements (as opposed to making shapes in Illustrator and importing as PNG's).

Secondly, I think there should be a visual indicator that something that appears in the working mode is going to be invisible in the preview mode. For example, a colored outline, or perhaps there can be a hint bubble that says something like Empty: Place Image or Text Within to See.

I think the more that Webflow itself tells me what's going on, the less time I have to come onto the forums or email support to get an answer. I know you've already got an error message that won't let you place a button inside of a link block.


#10

Just set its height in the style panel to let's say 300px and it should work.

Webflow in designer mode shows empty containers/objects so you can see them, select them or drop something inside. But if you create a html page and you type inside <div style="background: red;"></div> it will not appear on browser until you put something inside (eg. text), add padding to it or give it a fixed height. Webflow gives you the ability to visually "write" entire html code.

Once you put that container in place just give it a classmate and give a height of 300px. You will see the preview mode which is how the website will look like when rendered in browser.


#11

Ah Bartek, it's the height. So, in order to make any element such as a container or div be a visible, solid colored object I need to set it's height rather than keep it auto. I sort of still feel that there should be a visible indicator that an object is invisible, but anyway that's great to know now. Thanks.


#12

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