Help with active navigation bar

User 244626 Photo


Registered User
811 posts

Hello,

Trying out some of the templates such as Lady bug and Bahia while learning RSD. I cannot seem to figure out how to adjust the active nav bar setting in classes for the either of these templates. How is this done ? The Lady bug has a red top bar over the text page selections when either is selected and its a blue bar below the text on Bahia. I know this is related to the active-nav but cannot seem to find where to adjust size and color? Is it related to the class or type and do I need to identify state of text ?

Thanks for any replies as I am just getting started.
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,402 posts
Online Now

Twinstream wrote:
Hello,

Trying out some of the templates such as Lady bug and Bahia while learning RSD. I cannot seem to figure out how to adjust the active nav bar setting in classes for the either of these templates. How is this done ? The Lady bug has a red top bar over the text page selections when either is selected and its a blue bar below the text on Bahia. I know this is related to the active-nav but cannot seem to find where to adjust size and color? Is it related to the class or type and do I need to identify state of text ?

Thanks for any replies as I am just getting started.


Hello from sunny Bali
I suspect from whay you are describing, that it is the button link you need to be looking at

In design pane
1/ go to the style section
2 next to state click the dropdown menu choices (default shows regular) ----select hover
2/ scroll down the design pane until you get to the border section (open this section if not already)
3/select the top bar for the border (as in there are 4 separate selections)
it should show you the border for that button link (don't have that theme so am guessing here.

Go back to the style section and choose Active
go back to Border etc etc

Same applies for the other theme I would imagine

hope that helps to get you started

You can change all the styles for buttons and links etc this way for letting your visitors know that there is something happening when the hover over it (size,Background colour, you can ecen skew it a little bit, so it looks loke it wobbles a bit (but that's a bit naff in my opinion)

Have a great dayeverybody
wherever in the world you are

Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 244626 Photo


Registered User
811 posts

Thank-you for your help. I see now that it is more complexly designed that I first thought. It appears that as the background pictures are changing the font colors of the menu text is also changing based on whether the backgrounds they are on are either a light photo or a dark one. That is really neat ! This leads to another question: How can I individually edit multiple classes assigned to one button link as one class lightens the nav selector bar and another class controls the text color ? There are 3 classes assigned to one of the button links.

Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,402 posts
Online Now

Twinstream wrote:
Thank-you for your help. I see now that it is more complexly designed that I first thought. It appears that as the background pictures are changing the font colors of the menu text is also changing based on whether the backgrounds they are on are either a light photo or a dark one. That is really neat ! This leads to another question: How can I individually edit multiple classes assigned to one button link as one class lightens the nav selector bar and another class controls the text color ? There are 3 classes assigned to one of the button links.



not sure I fully understand what you are wanting, but here goes

if you remove one of the classes from a selected button, that removes the styling associated with that class (you can always re-assign the class back again if you need to)

you can then assign a new class (say button-1234567890) and set the styling you want (background colour etc) and the styling will be assigned to just that button.

If you then want other buttons with the same style for that new class, just select the button, remove the class that you removed with the first one, and add the new class that you created with the other button, and BOOOm there it is the second button with the new stlye to match the first button ETC ETC

I am sure that someone else may have a better and clearer explanation, just a matter of time before they see it, in the meanwhile I hope that is sort of on the way to help you get clearer understanding.

Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 244626 Photo


Registered User
811 posts

Thank-you for your response. Again, very helpful.
Bootstrap 5 CSS Grid.
User 283347 Photo


Registered User
388 posts
Online Now

regarding the red line over the navigation on the lady bug theme...it is done by using the class "active-nav"
along with "nav-button" on the page you wish it to display.
User 10077 Photo


Senior Advisor
1,096 posts

Twinstream wrote:
How can I individually edit multiple classes assigned to one button link as one class lightens the nav selector bar and another class controls the text color ? There are 3 classes assigned to one of the button links.

One technique I have used is to create a page that I use just for styles. (I don't upload the styles page when I FTP the site. It's just there to hold styles for RSD.) Using your example, your button on your main page has three styles.

I add 3 buttons to the styles page.

I apply the first style to the first button, the 2nd style to the second button, the 3rd style to the 3rd button.

I can now see exactly what settings are applied with each style.

At this point, you can make setting changes to individual styles on any of the 3 buttons, and they will be reflected on the button that has all three styles on the main page.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 244626 Photo


Registered User
811 posts

Thanks for all the additional information on classes. I have replicated for tutorial lesson some of the rsd template index pages I mentioned above but using Responsive Foundation instead. I found it easy to have both programs open and have learned quite a bit by recreating side by side. I noticed in Foundation you are able to toggle the classes on and off which is what I was trying to wrap my head around in rsd. I am not sure I have it totally wrapped yet but it seems you can edit one class by turning the others off and then back on after the edit ?

Thanks,

Twinstream
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.