custom code blocks & templates coming soon :: join the beta list

How to Code Top Navigation Bars: Proposal, Contract & Invoice Links

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!

01

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.


Stuck on fonts?

Stick to Google Fonts and take a look at these for inspiration: Colors and Fonts, FontPair, or head over to my Pinterest board.

Stuck on colours?

Take a look at Muzli Colors, Coolors, my Pinterest board for some inspiration.

02

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>
03

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>
  1. Background colour for your navigation bar (line 4)
  2. Font name for your Proposal, Contract and Invoice links (line 47)
  3. Colour for those links (line 54)
  4. Colour when cursor is hovering over those links (line 57)
  5. Background colour for the default Dubsado warnings (line 84)
04

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!


© 2020 SEARCH & GROW
|
PRIVACY POLICY
|
DESIGNED BY ME ♦
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram