Super Newbie

[leds87]

Hi, I am super new to wappler, I had made a website before use Wordpress + Divi, now I am expanding the skill, but I need minimal / no coding since I need to work fast. I see wappler is a possible solution, tried for a day and I cannot even make a navigation bar properly. I see no beginner guide in here, no guide for each of component of how to use it at least.

I might asked a lot of question here if I may.

The first problem about navigation bar is I want to be like

Home Page - Nyata Foundation

its the website I created, not finished yet, want to upgrade it with wappler.

In there, the first header has logo on the left, language switcher on the right then on the second row is the navigation bar.

How can I make that in wappler? if someone can explain step by step it would be great… and sorry for not trying hard enough, already tried for hours, still cannot make the same thing.

I am pretty confuse about Navbar, Navbar Toggler, Navbar Nav. What the difference among those 3? I know I must use navbar, but why there are 3 of them? I already saw the sample project from the app itself, but it doesnt explain anything except the sequence how to use it.

[Teodor]

Hello,
The navbar component consists of a few parts:

• Navbar Brand - this is your logo/brand name
• Navbar Nav - the navigation items of the navbar (links)
• Navbar Toggler - this is the toggle button which shows when the navbar is collapsed on small screens
• Navbar Collapse - this is the collapsible element which contains your navbar nav and collapses on smaller screens

So for a really basic navbar your app structure looks like:

Just customize everything as you need it.

[leds87]

thank you for the reply. I still don’t understand how to use it properly.

Why not just put image and link instead of Navbar Brand? What is the different?

How do we link the Navbar Toggler and the item that we want to be list?, what happen if there are 2 Navbar Toggler?

and can you explain what is “Navbar” for? the 3 orange dot icon one. Why not just put Navbar Brand etc in a row directly?

[Teodor]

The answers to all your questions can be found in Bootstrap docs:

Navbar

[leds87]

I see, I just realize I skipped the basic knowledge of wappler. Now I understand why in wappler there is no component and basic guide.

Thank you very much @Teodor, I will learn the Bootstrap and Wappler for a while.

[Dave]

Welcome to Wappler and the Community @leds87

[Teodor]

We’ve setup a quick tutorial about the navbar, hope it makes the things clearer for you:

Creating a Bootstrap 5 Navbar

Intro In this tutorial we will show you how to build a Bootstrap 5 Navbar from scratch. We will build a basic navbar with a logo and the navigation links aligned right. We will also apply a dark theme to the navbar. The navbar component consists of a few parts: Navbar brand - this is your logo or company name. Navbar toggler - this is the button use to open the navigation links on smaller screens, where it’s collapsed. Navbar collapse - this is the element which hides/collapses the navigati…

[leds87]

Thank you for the welcome, and Thank you very much for the step by step quick tutorial that is very useful, and after learning the bootstraps 5 I can now understand more about how it works and now I am making progress.

This is very great support !!!

[leds87]

Another question here, I can place the button or paragraph in front of the image as in tutorial with design - position - absolute and manual input there as in tutorial but how can I change that according to view? for example if its from phone I want only 5 px bottom, or change font size when it’s on tablet etc etc

I can see from this page
https://docs.wappler.io/t/using-the-design-panel/6892 on Responsive Styling

What I do is create class selector, in my case “Red-Button”, then I change the view to Full Screen, set things up such as absolute position and margin, then after I done, I change view to Phone, then I cannot set it while it’s in yellow. I can edit the white color letter or blue one. I did press with mouse and move slide the margin it can change but then I cannot put it back to default value.

Did I do something wrong? Also I am not clear in here, which one is the default? The Full Size? If that so, is it better I make the whole page from Full size first? Also sometimes I did success change value on the other view let’s say tablet view, but then, it also change for the other view as well as Phone.

I am not so sure how this works, I follow step by step from tutorial from that link. I also check it on style.css file, there is no data for responsive, so which data for phone view or tablet or desktop?

Any help or explanation would great, thank you