Help editing Dark Header component NavBar without converting to Custom Code

Perhaps another beginner question - first day with bss - but I've pulled in the included "Dark Header" component and am trying to customise it, particularly the navigation bar. I want to add a logo image (wrapped in an anchor tag) to the left of the nav brand. I've managed to do this by converting to HTML but then I lose a massive amount of functionality in the program - I might as well be using a text editor as I can't change a large component of my page now through the menus/drag and drop. I wasn't able to work out how to make the alterations without converting to HTML though. The application wouldn't let me drag and drop image or anchor elements next to the existing navbrand component. It appears to restrict what type of elements can be dragging into various positions? Navbrand is shown in the overview with padlock icon so I can't insert an element into the right spot. I also can't insert immediately to the left of it.

Can anyone help me? Or is there a way to convert my modified custom code back to a native bss component so I can use the interface again to work with it? How were the original components created that they still work?


There is no undo for converting, unless you do so before you shut the program down (not sure that the Undo applies to conversions or not, but that's what I would have done to be sure).

Lesson to be learned here is .... save your project as a new name ( I tend to add a number after the name and increment it for backups ) "before" you make major changes like that so you can go back if you need to.

To accomplish what you want you will need to add a new Header component in and redo it again. Don't delete what you have in the custom code so that you can copy and paste the content from it, but unfortunately, you'll need to redo it.

For the alterations, you can do this by duplicating the default classes of the Bootstrap locked ones. Then you can change the CSS settings however you want in them. That's the proper way to do this in BSS. Definitely stay away from converting code unless there is no other option, and there usually is if you look hard enough.

Back up your projects regularly when you're changing big things like that, especially when you are doing anything with converting to code so you can always go back if you need to. Another good reason for the backups is that you can open multiple projects and copy items from one to another so that you don't really have to lose all the work you may have done to other parts of your site or page if you're just wanting to replace something in the page. Works pretty slick for that part. Good Luck!

This can be done without using Custom Code component.

You do however, have to recreate the Navbar HTML piece by piece using the drag/drop.

  1. You will have to use a DIV element for the NAV element because the BSS app does not provide a NAV element.
  2. You will also not be able to remove the locked classes on the button component, so you'll probably need to use a little more styling.

I was able to recreate Navbar component by hand to test this. It will allow you to add another element before the Brand component.

Whether or not that's really semantic to do eh.. not sure.


Thank you both for your advice and helpful tips. Much appreciated. Saving regularly and having the 2 side by side is a great tip.

Saj I'm trying to reconstruct the navbar as you're suggesting, I've used a div in place of the nav component - thanks for the tip for this, but I can't work out how to apply the bootstrap nav classes to this div? I can add a new CSS block but how do I specify existing, core bootstrap css classes i want applied to an element??

I'm a little worried too about using div rather than nav and missing out on any nested bootstrap styling. It seems like a bit of an ugly work around, if the power of bss is in drag/drop I don't understand why the restrictions exist dragging new controls with the nav element? I guess bss must maintain some sort of allowed child element list. Maybe I can email the author, or does he frequent these forums? is he responsive to this sort of thing?

Cheers Mick

Select the div in the Overview pane then click on the HTML tab to expand it then click the ATTRIBUTES tab type in classes after any other classes that maybe listed as locked.

Some elements you will need to edit the content before adding the classes because they will end up hiding on you when you do.


Ahh thanks Saj my attributes panel was docked off-screen so I didn't notice it, I have found it now Can I just say as a new user reading the forums to learn, your posts (and yours Jo) are a really valuable resource thank you very much for taking the time to reply

Your welcome.

Happy to help if I can.