Good morning,

Overall, I am enjoying the site designer program. However there are a few items that frustrate me due to lack of tutorials or detailed descriptions. With regards to CSS, I am finding that in some cases I am not able to have it hold, or even make the changes to the elements. For example, I have created a responsive navbar using the bootsrap 4 tags. In this case I have created a burger toggle button but it will not change the color to white. I have tried adding a custom tag and still it will not change white. I can change its size, position, etc. I am sure it is a simple fix but any insight to how this system works would be very helpful. I have been just diving in with the trial and error method and it has become frustrating.

I have attached a few images for reference, as you can see, the color is set to white. No change.

Thanks for the help.

Hi Ryan,
You're probably having a default class within Boostrap override your styling. If you share a link to the page with the nav on it we can probably help you fix the issue.

Thanks Eric,

Sorry still a little new to this program. What is the way to do that? Are you speaking to the link that is generated when the preview button is used?

Very often it helps if you could post the actual project (or at least a part of it which has the problem). An image is not always the best thing to show the error.

Is it the blue button reading Active you want to change? In the CSS it has the class .btn-primary. The 'primary' bit Is describing the colour of both the background and text. All 'primary' buttons are blue with white text in Bootstrap. If you want to change that, you have to delete the class .btn-primary and set your own text and background colour.

I'm not sure about the button I see at the bottom of the screenshot showing the CSS. Which classes have been added by Bootstrap, and which classes have you added yourself? The third screenshot, of the typography is showing white text, we don't see the setting of the background, nor do we see which button it is for.

If what I have written does not help you, then your best bet is to post the project file. If it is too large for an attachment, maybe you can use Dropbox.

So the button I am looking to change to white is right to the right of the active button. It is the bin-toggle-icon. Here are the classes I have assigned.

btn
navbar-toggler
navbar-toggler-icon
btn-custom

Ill attached the file below. it is just a playground file, to work out the kinks with responsive nav.

Thanks for all the help.

Also, yes I want to delete most of Bootstrap CSS as it is assigned. I have custom colors, sizes, and icons I need to set to buttons, and other elements. I have been working through the online documentation to understand how this is done. would you mind walking me through how to accomplish this. Say I would like to apply a teal primary color.

I normally would set up a custom CSS file, but I don't want to make huge changes. I just want to change the theme colors to the clients brand colors and apply them to primary, secondary, hover, click. etc.

I'm looking at your file now. I have made that 'invisible' button visible by giving it a white background. But to be able to see it at small viewports, I had to give a background colour to one of the containers - I chose the heroLanding one. Since the blue Action button doesn't actually do anything, it seems to me to be redundant.

I'm still playing with it...

I understand however that is not what I am trying to accomplish, I just want the burger menu toggle item to be white. Meaning I want the three lines to be white and thicker. I need it to be a transparent background. The Action button will be a sign/up login button.

I adjusted some widths and margins, but I didn't want to do too much. Here is the file with my changes.

I see what you are trying to do, and I'm just finalizing one of my own navbars to let you see how it can be done. Just hang on in there!

PS: I hadn't seen your last post when I sent off this.

Hi again,

Even if the attached file is not exactly what you are looking for, you should be able to see how such a menu is made, and also, how to get rid of Bootstrap's control over your colour scheme (you need to delete all btn-primary, -secondary, -alert, -danger etc, and also navbar-dark and -light). Then you can set your own colours.