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

Top Navigation Bar Generator

This is Dubsado's default 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!

This code includes a logo in the top left, which will move to the centre for tablet and mobile devices—you can test this out by resizing your browser window.

Below you'll find the generator that'll give you your branded code, along with how to remove the logo.

You can literally have a fully on-brand navigation bar within seconds!


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
  3. Logo image URL

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

How to get image URLs?

Read my blog post on how to find these.

Stuck on fonts?

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

Stuck on colours?

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


Open your form and drag in a Code Block—this is where you'll be placing your branded code from the generator.

Now you're ready for the generator!


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).


If you'd rather not have your logo in the navigation bar, just remove these sections of code from the bottom of your generated code:

/* logo */
#quote-flow:before {
	content: '';
	background-image: url(logourl.jpg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100px;
	height: 75px;
	opacity: 0.97;
	display: block;
	margin: 0 auto;
@media only screen and (max-width: 991px) {
	#quote-flow:before {
		margin-bottom: 20px;

I'd love to hear how you got on with this—leave me a comment below!

close generator

custom dubsado block

code generator

Top Navigation Bar Generator

show me the magic
how to use this code generator
1. Enter your branding elements into the fields. 
2. Press the button to preview your branded Custom Block. 
3. Once you're happy, click the copy code button.
4. Paste your code into your Dubsado form.

your live preview

I'm ready for my code!

STEP 01 :: ENTER YOUR branding elements here

clear fields

The Bar

10 px
20 px

Typography :: The Details

12 px
2 px
© 2020 SEARCH & GROW  |  privacy policy  |  v2.0
© 2020 SEARCH & GROW
cross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram