I have an initial start and setup for my new project. I have been stuck on this part for over an hour, so I figured I would post so this nice community can help me. I am newer to Wappler and I see that I somehow edited my 'ACTIVE" stage of the navigation links, but when you look at my screenshot below, the Active stage is not even on. I cannot seem to find where in the heck on the sidebar this background Blue color is coming from.
Also, while I am here, I need to make my navigation links to include a much lighter background color, and the pill form is just fine, nut I want to extend the pill form out a little more and recenter. Can I get a confirmation on how to do this as well?
Have you run your page on your browser?
Obviously this is part of what dmxBootstrap5Navigation.js does... <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
Don't forget that your "dashboard" is the root/initial desination (content page) of your main layout ("/"). Do you have any special css styling for the active nav-link item (nav-link:active)?
On your wappler Design View you probably have to ignore a few things and test on your browser for the final result.
I think that if you refresh your view it will dissapear...
Please run your page on browser and report any weird behavior or errors here
Hi @famousmag thanks for the reply. Yes I have been saving frequently and reloading my browser page to view live updates (as I am a more visual person). As you can see, in my live view with my browser it shows up. But on my Wappler, it is no where to be seen (the blue background and pill shape selection).
The active class is determined by this bit of JavaScript in the heading of the page/layout page. <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
I am still looking for an answer how to create what the link looks like in each stage, Hover, Clicked, and so on. These answers have not helped me so far
I just need to know what to click and hit to set up my links to look like this in my design.... Is it really that hard? I just need to be told what to click and settings to configure to make it look like this:
The style is style1 and the condition will be: browser1.location.pathname=='/wapplercommunity/stylenav/home.php'
Repeat the same, on the other 2 pages with: browser1.location.pathname=='/wapplercommunity/stylenav/about.php' browser1.location.pathname=='/wapplercommunity/stylenav/contact.php'
That's it:
This is an example of how class toggle works.
You can check a variable or anything and use it as a condition for styling.
If you need to override something just make sure your custom css is loaded as last one, and you can add !important if you need it
Hi @franse & @famousmag I appreciate both your replies. The reason I am having difficulty as I learn best when I see a full project created on screen and I can follow along from start to finish. But there are no recent videos of anyone outlining, building, setting up servers, and APi's video that give a full and complete picture of where to find the correct tools and what to click on WAPPLER Platform. Yes I know there are the short videos by Ben and another guy. But those are short and sweet which is great, but again I need to see a full project to be able to understand how the Wappler Platform works. (I learned a lot about the bubble without actually downloading and trying because of the vast amount of YT videos on it and people building for you full SaaS apps and its great!)
Now that is out of the way, I have created a screen recording of my current setup, as you will see I have edited my first link 'Dashboard' and I thought I was editing the way it looks for HOVER and ACTIVE state but you can see it's just the default.
Now I all links underneath are exactly how I want them to be performing, just need to match the active state to what my 'dashboard' link currently looks like.I am not seeing where this current grey and smaller circle around all other links are coming from.
I wish WAPPLER just let you edit the Active State while you have it clicked, and when you unlick you could edit the normal way the link works. This is what I was doing, but now I see that was wrong.
Developing a full web app in node.js with Wappler, this course will cover from initial install of Wappler to final product with detailed examples of using components along with discussion of the concept of development and why we do things in certain ways.
An e-commerce application using Wappler, NodeJS, SQLite, Bootstrap and Stripe
So there you have some hours to learn about the software.
Now, about your problem with navigation links, sorry, I can't understand the video.
It won't work if you hit active as a static thing, you need to know when it needs to be active, that's why I made the example of class toggle, you can use the style active on the input and then call it the way you want/need like "when you're on dashboard or revenue"
Wappler is far more intelligent than that and I think that you are comparing Wappler to Bubble.
Don't forget that Bubble is like a tram running on rails with a set destination, no steering required. All very simple yet restricted in its application. Wappler is like a bus where the route can be changed at will. It requires a more informed driver.
Having said that, Wappler already incorporates the Active and Hover events as standard, the only thing that the developer needs to do is to harness the colours.
The following is an example of what I have done, using the guide that @famousmag supplied earlier on.
After reading and absorbing all your knowledge and help, I have come a long way in just the links so far, and yes this last article was great for me. I am getting more familiar with CSS classes. I see now that I knew little on styling and classes and this was my learning curve for me.
Here is where I am now! I just need to fix the following now:
link background color overlays and goes into main content area, need to make that a fixed width i believe...
breakpoints timing needs to be adjusted
'company' search needs to be fixed and not fluid
icons move and need to be fixed at certain breakpoints
Thanks ya'll for helping with this. I feel a little silly that just links was a learning curve and classes, but hey I am learning and can already see progress!
Especially if you don't name them properly so you know what each style mean and what is for
("style35", "style22", "style39" etc.... )
You will end-up having a loooot of style rules you will not be able to maintain and handle
Anyway, let's focus to your specific problem.
I think you have (accidentlly) set a css rule to your nav-links.
So, please delete the word "style35" from all the nav-links in your code and see if this fixes the overflow behavior of the nav-links. ONLY THE WORDS that I have underlined!
Hey thanks for that. Yes, I now see that my lack of knowledge of this ahead of time i see my style sheet is full of created new style classes as I didn't know what I was doing every time I made an edit. With more clarity now, I have diverted down to just one style class for all nav links instead of many variations of. Also fixed the spacing and for the background and color when active.
Here is an updated video of my updates. Can you confirm you see everything working correctly through different screen variations as well?
My next question would be, what is normal protocol / industry standard on SETTINGS, PROFILE, and LOGOUT? Would I be making these as their own unique pages themselves? I figured I would just create either a MODULAR pop-up / same Dynamic OffCanvas for a more fluid and smooth operation of the platform. I see settings maybe with more varied options and setup for the user, than let's say the Profile Tab as that would be standard email update, password, etc.
I have yet to setup my AUTH Pages for Sign Up / Sign-In and the security measure setup that comes with that. If you think this is a good time to go do that, I can. I already know how that will look as well and have watched the Auth video provided by the Youtube channel.
I am sill trying to figure out the flow of what to setup, and when for best setup and testing of the platform. I appreciate the help. Learning lots so far.
