This post has now been made available via a Code Generator over in my Free Tools

—I'm keeping this one here in case you want to learn

Dubsado proposals have a handy top navigation bar, which usually shows Proposal, Contract, and Invoice.

It's one of the first things prospects see when they open up your proposal, so let's brand this baby up for brand cohesion.

Below you'll find the steps to code this navigation bar, including my custom code that I've developed (and re-developed about a million times) to make sure it works on all browsers and devices.

If something plays funky, please let me know!

Your Brand Elements

For this code, you'll need to have some brand elements to hand:

1. Brand colours—more specifically HEX codes for the following:
   • Background colour
   • Text colour
   • Accent colour (for when hovering over links + default error messages)
     
2. Font name for the links

Make sure your background and text colours are a good contrast so that you can clearly see your links against the background.

CSS Code

Open up your Dubsado form and drag in a Code Block to the top of your form.

Replace the sample code with the following (click the top-right icon to copy the whole lot):

<style>
/*Top Navigation Bar*/
#quote-flow {
	background-color: #ce7e00;
	position: relative;
	top: 0;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin: 0rem -50vw;
	padding: 10px 0px;
	display: flex;
	align-items: center;
	z-index: 99;
	transition: all .2s ease-in;
}
#quote-flow table {
	width: 940px;
	margin: 0 auto;
}
@media only screen and (max-width: 991px) {
	#quote-flow {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}
	#quote-flow  table {
		width: 80%;
	}
}
@media only screen and (max-width: 767px) {
	#quote-flow table  {
		width: 100%;
	}
	#quote-flow table td {
		display: block;
		width: 100%;
	}
}
@media only screen and (max-width: 420px) {
	#quote-flow table td {
		width: 100%;
		display: block;
	}
}
#quote-flow a {
	font-family: 'Lato', sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #FFFFFF;
}
#quote-flow a:hover {
	color: #000000;
}
/* reset defaults */
#magic-line {
	display: none;
}
.pull-right .dub-btn {
	display: none;
}
.container {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
.padding-30 {
	padding-bottom: 0px;
	padding-top: 0px;
}
/* hide default PDF button */
.col-sm-12.hidden-print.padding-top-20 {
	display: none;
}
.col-sm-12.margin-top-20.hidden-print {
	min-height: 0px;
}
/* error messages */
.toast-warning {
	background-color: #000000;
}
</style>

Update Branding

Now we need to update the sample branding with your own— below you'll find the highlighted lines you need to edit, along with what they are.

They are the places you need to plug in your branding elements:

<style>
/*Top Navigation Bar*/
#quote-flow {
	background-color: #ce7e00;
	position: relative;
	top: 0;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin: 0rem -50vw;
	padding: 10px 0px;
	display: flex;
	align-items: center;
	z-index: 99;
	transition: all .2s ease-in;
}
#quote-flow table {
	width: 940px;
	margin: 0 auto;
}
@media only screen and (max-width: 991px) {
	#quote-flow {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}
	#quote-flow  table {
		width: 80%;
	}
}
@media only screen and (max-width: 767px) {
	#quote-flow table  {
		width: 100%;
	}
	#quote-flow table td {
		display: block;
		width: 100%;
	}
}
@media only screen and (max-width: 420px) {
	#quote-flow table td {
		width: 100%;
		display: block;
	}
}
#quote-flow a {
	font-family: 'Lato', sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #FFFFFF;
}
#quote-flow a:hover {
	color: #000000;
}
/* reset defaults */
#magic-line {
	display: none;
}
.pull-right .dub-btn {
	display: none;
}
.container {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
.padding-30 {
	padding-bottom: 0px;
	padding-top: 0px;
}
/* hide default PDF button */
.col-sm-12.hidden-print.padding-top-20 {
	display: none;
}
.col-sm-12.margin-top-20.hidden-print {
	min-height: 0px;
}
/* error messages */
.toast-warning {
	background-color: #000000;
}
</style>

Move Code Block

And one last final step, move this Code Block anywhere but first in the Dubsado editor.

This is because with Dubsdao's default styling, it'll leave a gap. By moving it lower, the gap won't be there.

Click Save and then open up your public view link to see how it looks—make sure you use InCognito mode (to remove the business owner alert).

There you have it! A quick and easy top navigation bar—if you create one, share it in the comments so I can take a peek!