—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!
For this code, you'll need to have some brand elements to hand:
Make sure your background and text colours are a good contrast so that you can clearly see your links against the background.
Stick to Google Fonts and take a look at these for inspiration: Colors and Fonts, FontPair, or head over to my Pinterest board.
Take a look at Muzli Colors, Coolors, my Pinterest board for some inspiration.
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>
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>
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!