Getting Started
Navana is News and Magazine Ghost. It is built for planners, bloggers, engineers, specialists, writers, developers, and designers. Navana is a fully responsive, lightweight, superfast ghost theme and built with HTML, CSS, js, scss, and ready for premium subscription features.
Support
If you have any questions that are beyond the scope of this help file, please feel free to send your questions to our support email: support@electronthemes.com Our support team will reply to you within 6 hours.
Template Information
- Name: Navana
- Author: Electronthemes
- Platform: Ghost
- Demo: Navana
- Created: 18 November 2020
- Last Update: 25 August 2021
- Version: 4.1.0
Theme Setup
Navana theme setup is very easy. If you have already installed a server for Ghost you can easily setup Navana theme. If you don’t have server supported with Ghost, you can set up reading Ghost Install. When you have the server, follow the instructions for setting up the theme.
Upload the theme
You can upload the theme file from ghost dashboard. to do this
- Log in to your Ghost admin panel.
- Go to
settings > design > Change Theme > upload theme and then upload your theme
- Click Activate.

Uploading the theme via (FTP)
Follow the instructions
- Login to your FTP account.
- Unzip the
navana.zip
file and copy navana folder to your/ghost_installation/content/themes
- Restart your installation if necessary. You can ask for help from your hosting provider if you don’t know how to do this step.
- Login to your ghost admin panel.
- Go to settings (general) and select theme “Navana“
- Click Save.

Here I have used Cyberduck to upload file on server and I used subdomain. That is why I used Navana Folder
General Setup
Publication Info
To change publication info, go to Dashboard > Settings > General > Publication Info.
Here you can change the followings:
- Title
- Description
- Site Timezone
- Publication Language

Logo
We have used SVG Logo for the theme. You can change SVG Logo from Dashboard > Settings > Design > Publication Logo.

Please upload SVG Logo image so it will support dark and light mode also
Publication icon
Ghost shows his ghost logo in your site by default. You can change Favicon Icon or Publication Icon from Dashboard > Settings > Design > Publication icon

Publication Cover
This is for showing site bookmark image. If you upload a cover image, it will in your site bookmark

Site Meta Settings
This is for Metadata. It will help to get on search using search engine. You can add also Twitter and Facebook card images, content here.
You can add/edit the content from Dashboard > Settings > General > Site Meta Settings

Social Accounts
Social account section is for showing Facebook, Twitter links of your site. Go to Dashboard > Settings > General > Social Accounts

Primary Navigation
Ghost only supports two types of Navigation. Primary and Secondary Navigation Menu. On the header, primary navigation is showing and On Footer secondary navigation is showing. Go to Dashboard > Settings > Navigation > Primary Navigation

Secondary Navigation
You can change menu item on secondary Design > Settings > Navigation > Secondary Navigation

Create a Post
Ghost has a beautiful dashboard design. You can easily create a post. Go to Dashboard > Posts > New Post
- Post Title
- Post Contents
- Feature image
- Tags
- Authors

Create a page
As like as post, you can create a new page from Dashboard > Pages > New Page.
You can add:
- Title
- Contents
- Tags
- Authors
- Feature Image
- Excerpt
- more…

Featured Post
Ghost has awesome featured posts option to show some of your chosen posts as featured for the visitors. To add a post as featured, go to Post > Settings
and scroll down. Select the checkbox Feature this post

Create Tag
To create a new tag, go to Dashboard > Tags > New Tag

Create Author
You can create multiple authors on your site from the dashboard. Go to Dashboard > Settings > Stuff > Invite people

Click on Invite people and you will get a new popup. You have to add Email Address and select the staff Role. Lastly, click on Send Invitation now button. An email notification will be sent to create an account on the specific Role.

Code Injection
Code injection is a great feature on Ghost. You can easily write styles and scripts for your site without editing the theme file. You can add various plugins code here like Google analytics
Here you will two text field for code injections. 1. Site Header and 2. Site Footer
Go Dashboard > Settings > Code Injection
Site Header
If you write scripts on site header, it will show in <head>
tag of header. It will load first in your site
Site Footer
If you write scripts on site footer, it will show at the closing of <body>
tag. It will load last in your site

Integrations and Custom Integrations
Integrations are another cool feature of Ghost. You can connect a lot of third-party plugins or API using integrations. To check the integrations, go to Dashboard > Settings > Integrations.
You will get some inbuilt integrations and custom integrations options
Custom integrations
To create custom integrations, click on + Add custom integration at the bottom of the page and you will get a popup and add a name of the integration and Create. I have create here Search and Github Deploy integration

Labs
Labs is another very important and beta tester parts of Ghost. Here your will get some core features as follows: Go to Dashboard > Settings > Lab.
- Import Content
- Export your content
- Delete All Content
- Tiers
- Redirects
- Routes

Headers

For header, we have used {{> header}}
partials in folder partials/ header.hbs.
Header
- Logo
- Primary Navigation
- Dark Light Icon
- Search
- Signin/Signup
Logo
To change the logo markup or text, find this structure on header.hbs
file. We have used 2 logos for Dark and Light mode. Light mode logo is a default logo. You can change the logo:
- To change light mode logo:
Dashboard > General > Publication Logo
- Dark mode logo is a custom logo. To change this logo, go to
theme-file > assets > img > logo
folder and you will find the dark mode logologo-dark.svg
for dark mode. Use same size logo as light mode
<a href="{{@site.url}}">
<img class="logo-light" src="{{@site.logo}}" alt="{{@site.title}}">
<img class="logo-dark" src="{{asset "/img/logo/logo-dark.svg"}}" alt="{{@site.title}}">
</a>
We recommend to use .svg logo. If you use .svg logo, actual resolution will be kept.
Primary Navigation
For Primary navigation, go to Dashboard > Design > Primary Navigation
Dark Light Feature
Newsvolt supports dark light mode. By default, it is on Light mode. If you activate dark mode as default, use data-theme="dark"
in HTML tag. Edit the file default.hbs
in theme-file/default.hbs at line number 2
<html class="no-js" lang="{{@site.lang}}" data-theme="dark">
Signin and Signup
You can change Members Menu from {{> members/members-navigation}}
partials. You can easily change signin and signup links from partials > members > members-navigation.hbs
file at line number 4
Footer

We used very minimal footer in our theme. You will get all footer code partials > footer.hbs file. Here are the following parts:
- About Text
- Tags
- Secondary Menu
- Social Profile
About Text
In footer, it shows About Text. You can change about text from partials > footer.hbs
Line Number 17
<p>{{t "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, sit lectus fermentum donec id aliquam. Lacus vestibulum in duis orci gravida et. Risus nulla aliquam at nulla in cras tortor vehicula."}}</p>
Footer Social Profiles
Change footer social profile links at footer.hbs
and you can add more links aftre copying this. Change #
with your links. Line Number 64 to 90
<li>
<a href="#">
{{> icons/social-icons/instagram}}
</a>
</li>
If you want to add new social icons, go to partials > icons > social-icons
folder. I have used svg icons from Feathericons. Download icons from here and add them to the folder. Change the icon’s extension .svg to .hbs
facebook.svg --> facebook.hbs
Secondary menu
Useful Link comes from the secondary menu. You can change the secondary menu link from Dashboard > Design > Secondary Menu
Copyright text
You can change at footer.hbs
file line number 103
<p>{{t "All copyright reserved by Electronthemes. Published with "}}<a href="https://ghost.org/">{{t "Ghost"}}</a></p>
Change the text inside {{t ""}}
Custom Templates
Custom template is a default setting on Ghost. It can be page template and post template. We have created some custom page and post templates for the theme. The page template are as follows:

Page Template
- Membership
- Account
- Contact
- Authors
- Tags
- Signin
- Signup
Selecting page template
- Create a new page
- Click on Settings to the right side and scroll down
- Select page template i.e. “Membership”

Page url

When you create page, please keep page slug like this.
Page title | Page URl |
Membership | /membership/ |
Account | /account/ |
Signin | /signin/ |
Signup | /signup/ |
For other custom pages, you can add Authors, Tags, Contact page.
Post Template
- Post Full Width
- Post Left Sidebar
We have used 1 posts page style in this theme. You can choose as following:

Membership and Subscriptions

Here we have used 3 pricing plans.
- Free/Basic Plan
- Monthly Plan
- Yearly Plan
Change the text inside <li>{{t "..."}}</li>
Free/Basic Plan: For changing basic plan {{> members/pricing-tables/plan-free}}
partials is used. You will find partials > members > pricing-tables > plan-free.hbs
<ul>
<li class="enable">{{t "Access to subscriber posts"}}</li>
<li class="enable">{{t "Regular updates with new content"}}</li>
<li class="enable">{{t "Regular newsletters"}}</li>
<li>{{t "Support independent publishing"}}</li>
<li>{{t "Simple, secure card payment"}}</li>
<li>{{t "No advertisement"}}</li>
<li>{{t "One easy payment instead of 12!"}}</li>
</ul>
Monthly Plan: For monthly plan {{> members/pricing-tables/plan-monthly}}
partials is used. You will find partials > members > pricing-tables > plan-monthly.hbs
<ul>
<li class="enable">{{t "Full access to all private posts"}}</li>
<li class="enable">{{t "Regular updates with new content"}}</li>
<li class="enable">{{t "Regular newsletters"}}</li>
<li class="enable">{{t "Support independent publishing"}}</li>
<li class="enable">{{t "Simple, secure card payment"}}</li>
<li class="enable">{{t "No advertisement"}}</li>
<li>{{t "One easy payment instead of 12!"}}</li>
</ul>
Yearly Plan: For yearly plan {{> members/pricing-table/plan-yearly}}
partials is used. You will find partials > members > pricing-tables > plan-yearly.hbs
<ul>
<li class="enable">{{t "Full access to all private posts"}}</li>
<li class="enable">{{t "Regular updates with new content"}}</li>
<li class="enable">{{t "Regular newsletters"}}</li>
<li class="enable">{{t "Support independent publishing"}}</li>
<li class="enable">{{t "Simple, secure card payment"}}</li>
<li class="enable">{{t "No advertisement"}}</li>
<li class="enable">{{t "One easy payment instead of 12!"}}</li>
</ul>
Third Party Plugins
We have created real time search options and Formspree for contact form.
Search Options

We have used Fuse.io for creating real time search. When you will type, you will get instant results. When you install the theme file, you have configure and add content api key on conde injection
- Create a custom integrations
- Copy Content Api Key from your created custom integration
- Go to Code Injection > Site Header as follows


<script>
var contentApiKey = "your content api key"
</script>
Contact form
In contact form, we have used Formspree for getting form data. Change your email in <form>
tag in partials > contact-form.hbs file at line number 6.
<form class="row" action="https://formspree.io/youremail@domain.com" method="POST">

To change contact information, go to contact-info.hbs file. You change all of the information.

Disqus Comment box
We have used discus comments for this theme. We have used our own discuss account. You can change easily with your Disqus shortname. Follow the process to create your disqus account and get a short-name.
- You can create your Disqus code in the next url: http://disqus.com/admin/create/
- Add a short-name for Website Name
- Your unique “Disqus URL” is your shortname copy that name and click finish registration.

- Go to the directory where is your template.
- Go to
partials/disqus
and open the next file:disqus-comment.hbs
and git to line number 11 for disqus_shortname = “navana”; - Change with your shortname, in this case ‘example-shortname’;
- Save the file and upload to your ghost installation.
- Optional, you can verify if all is correct by clicking Verify on the Disqus steps (where we get our short name).
Credits
- jQuery – jQuery http://jquery.com
- FitVids.js https://github.com/davatron5000/FitVids.js
- Fuse Search https://github.com/krisk/Fuse
- Prism js for Code highlighter https://prismjs.com/
- jQuery Lightbox https://github.com/francoischalifour/medium-zoom
- Lazy loading disqus https://samclarke.com/lazy-loading-disqus
FONTS ICONS
VERSION – 1.0.0: Release on 18 Nov 2020