Working with Boostrap 4 Navbar

Hi George,

I’m trying to be helpful because I really hope you succeed. But here is an example: I placed a nav-bar on my home page just before I posted my last post. Since that time, the only place that I can see to attach a location to the various 8 items in the nav-bar has been to go into the code and type in the name and links to each. Seems to me that there must be a quick way to put a multiple link nav-bar into the header and quickly attach the links to each item, but I cannot find it because I cannot sort out the nomenclature. I tried Nav-Text, but that put another text field above the bar. And I could not find another approach.

I saw another post in these categories from a designer that said it took three months to get used to the design process. I may be dead in three months.

I’m well on my way to learning enough to build my prototype and you have all been very helpful. But I cannot learn fast enough from your docs - which I repeat, are outdated by your frequent updates. I applaud your speed, but it is hampering the adoption of your product by the designers.

I hope I don’t slip down the mountain on the steep learning curve, but I don’t know how much patience others may have.

Thanks for your time.

Hello Jay,
Please check the documentation about creating a navbar:

1 Like

Sounds like you may have experimental features turned on? It is pretty straight forward in the production design view to add menu items.

51%20AM

If yo are just learning Wappler it is not a good idea to have the experimental features turned on if that is the case.

Hi Brad,

Thanks for the recommendation. Is there a way to switch back and forth between the two?
John

Sure, use the gear icon on the bottom left of the UI to get to the options.

Select ‘System’ and toggle the ‘Enable Experimental Features’ on and off … hit save.

Thanks, again.
John

No problem, ask away with any questions you may have. You will be able to follow the docs more closely with experimental features turned off. :wink:

I’m trying to follow the documents but I don’t see a Header ‘Category’, just an individual header, into which I have to build the navigation

. What am I missing?

Hi Pterobyte
You should click on Header and then in the Header click the + icon and on the left pupop menu click Navigation and then Navbar in the Elements windows on the right side.
I know there is also some ready made components (new features added lately) so instead you may click the BLOCKS tab (in the popup windows) and type nav so you will see different type of navbar, I never used it so far but should work fine.

Hope this help :slight_smile:

Thank your for your quick reply.

I see how to add individual blocks but I’m following this tutorial which has container, row, and column before adding the Nav. So it looks to me like a the template feature is not there. I also wonder if we can create new templates or reusable assets of our own?

Is it just not there any more or is there a module I’ve not loaded? I found some features are just not there unless App Connect and Boot Strap are first loaded.

wappler1 wappler2

If it’s not there anymore than this tutorial " Your First Bootstrap 4 Page in Wappler" is no longer relevant.

The navigation templates are now under blocks, so you can find them there.
Use the search filter if it’s easier for you.

I can find the navigation elements, what I can’t find is the Header that already contains the navigation and brand elements as outlined in the tutorial. Here is a picture from the Tutorial of the Header with multiple options as highlighted in blue with a count.

wappler3

I don’t see this at all, all i see is header with no options. Also where and what are blocks? Is there no longer a header elements with brand and navigation elements included?

When adding anything on your page there are two tabs in the dialog - elements and blocks. Select blocks and you will see the navbar templates…

Mine did have those tabs. I upgraded 2.0 beta and now I see the tabs.

In the 1.9.9 stable version you need to enable the experimental features in the system options, in order to see them.