nowa – PHP Bootstrap 5 Admin & Dashboard Template

nowa - PHP Bootstrap 5 Admin & Dashboard Template

Introduction

Welcome to nowa - PHP Bootstrap 5 Admin & Dashboard Template

nowa - PHP Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass.
So please before you start working with the template take a quick look on the documentation. So it will be easy for you to understand.

If You Love Our Template Design Please don't forget to rate it. Thank you so much! 😊

Dashboard

Created Date: 19/05/2022
Author: SPRUKO™
Company: Spruko Technologies Private Limited
Support: support@spruko.com

Thank you for purchasing our admin template. Feel free to contact us any time. We have The Best dedicated team to provide you the best support. If you have any queries please reach us through live chat or email:- sprukotechnologies@gmail.com

Template Description

nowa– is a PHP Bootstrap 5 Admin & Dashboard Template using modern and minimal design. It is fully flexible user-friendly and responsive. nowa admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 100+ php Pages & 60+ Plugins more UI elements . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap5 framework. This admin template is fully 100% Premium Admin Templates quality. This template designed by using HTML5,CSS3,Jquery. After Purchased this template you will get All HTML files,CSS, Scss and JS Files.

It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design admin template.

it is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase nowa-PHP Admin & Dashboard Template, you will be able to get free download of all future updates.

Main Features

Vertical Menu
Horizontal Click Menu
Horizontal Hover Menu
RTL Ready
100+ php Pages
Bootstrap 5 Responsive Framework
Well Commented Code
24 * 7 Professional Company Support
Regular Updates
60+ Plugins
6 Types of Charts
About US
Blog
Flie Manager
Gallery
Ecommerce Pages
Settings Page
Blog Details
Calendar
Select2
Mail Inbox
12 Types of Icons
File upload
Message Chat
Month & Date & Year Range Pickers
Form Elements
Form Editor
Form Wizard
Sweet Alerts
Data Tables
Lockscreen Page
Error Pages
Under Construction Page
User Profile
Invoice Pages
Advanced Pricing Tables
Easy to customize
Google Fonts
More Widgets
Very Easy to Create your Own Site
Neat, clean and simple design
W3C Validated

Check out the folder structure of the Layout

                 
					├── assets
					|   ├──  css
					|   ├──  iconfonts
					|   ├──  img
					|   ├──  js
					|   ├──  plugins
					|   ├──  scss
					|   └──  switcher
					├── layouts
					|   ├──  app-header.php
					|   ├──  app-header1.php
					|   ├──  app-sidebar.php
					|   ├──  custom-scripts.php
					|   ├──  custom-styles.php 
					|   ├──  custom-switcher.php
					|   ├──  footer.php
					|   ├──  main-scripts.php
					|   ├──  modal.php
					|   ├──  scripts.php
					|   ├──  sidebar-right.php
					|   ├──  styles.php
					|   └──  switcher.php
					└── pages
						└── 100+ .php pages)

How to Run PHP Project in localhost

Step:1 Quick view of Installations

Download and Install the XAMPP from official site https://www.apachefriends.org/download.html

If you have installed XAMPP on your machine then please follow the below steps

Step:2 Run project

1. Launch Xampp and launch the Apache and MySQL servers by clicking the start buttons.

2. Extract the zip folder of the project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.

3. Once the extraction is completed, type the localhost url in the browser to access the project. Example: C:\xampp\htdocs\myproject.

Note : Do not forget to start Apache server and MySQL server

How to use GULP

1. Basicaly, Gulp is used to compile assets or styles of the project. In order to compile, please follow the below process.

2. First you need to install Node Modules in your project folder

3. And now set your project root path in terminal or command prompt Example: cd C:\xampp\htdocs\myproject\ and type the below command line.

npm install

4. Wait until all the dependencies are downloaded to your project folder.

5. Now you can see the downloaded folder with the name of node_modules in your project folder.

SCSS & CSS

Here we provided the packages.json and gulpfile.js files in your project you just need to run npm install in your terminal at your project root path.

After completion of download, you can compile your SCSS files into css files by using below commands.

Command	Description
`gulp`	Runs the project locally, starts the development server and watches for any changes in your code, including your html, javascript, sass, etc.
`gulp watch`	In this template `gulp watch` command is for what ever changes made in scss folder, will watch and run an appropriate task. All the CSS files under `assets/css/` folder will be watched and upon changes made to these files, the styles task will be executed.
`gulp skins`	In this template `gulp skins` command is for what ever changes are made in `skin-modes.scss` will be watched and the changes automatically updated in `skin-modes.css` file in css folder.

Compiling Styles

1. In the assets folder you will see colors, css, iconfonts, images, js, plugins and switcher folders

          
					├── assets
					|   ├── css  
					|   ├── iconfonts 
					|   ├── img
					|   ├── js
					|   ├── plugins
					|   ├── scss
					|   └── switcher

2. Now you can compile or customize your styles in scss files that are present in the assets folder.

3. Once the changes made in the files in order to apply those changes to your template you need to run the gulp commands in the same terminal or command prompt that you have set your project root path.

4. After Compilation, all your .scss files are converted into .css.

Installation Instructions For both CPANEL’S and FTP

Upload the Project that you have purchased, based on your uploading process on server

FTP Uploading Process

Access FTP:

Upload Project Files:

Once you successfully accessed your FTP server navigate to the Path: public_html/ in your FTP server.
Now upload and extract the project folder that you have received, in the Path: public_html/
Once the extraction is completed, you can access your project by visiting your domain, Example: www.example.com

cPanel Uploading Process

Access cPanel:

Upload Project Files:

Once you successfully accessed your cPanel dashboard, navigate and click on File Manager
Now open public_html and click on Upload
Here you can select your zipped project folder or you can simply drag and drop your zipped project folder, once the uploading is completed go back to the public_html folder
In the public_html folder, you will find your zipped project folder now you need to extract that project folder
Once the extraction is completed, you can access your project by visiting your domain Example: www.example.com

Version

php :- 8.1
Gulp:- 4.0.2
node:- 14.15.0
npm :- 6.14.8

Over All Folder Structure

        
					├── assets     									    											
					|   ├── css  
					|   ├── iconfonts 
					|   ├── img
					|   ├── js
					|   ├── plugins
					|   ├── scss
					|   └── switcher
					├── layouts 
					|   ├──  app-header.php
					|   ├──  app-header1.php
					|   ├──  app-sidebar.php
					|   ├──  custom-scripts.php
					|   ├──  custom-styles.php 
					|   ├──  custom-switcher.php 
					|   ├──  footer.php
					|   ├──  main-scripts.php
					|   ├──  modal.php
					|   ├──  scripts.php
					|   ├──  sidebar-right.php
					|   ├──  styles.php
					|   └──  switcher.php
					├── pages
					|   └── (100+ .php pages)
					├── gulpfile.js
					├── package.json
					└── package-lock.json

SWITCHER?

If you want to add switcher to your template follow the below process.

How to add switcher to the template?

Go to root path: layouts/styles.php open "styles.php" file and add switcher css links given below.

     
		Add switcher css:

		<!-- INTERNAL SWITCHER CSS -->
		<link href="../assets/switcher/css/switcher.css" rel="stylesheet" />
		<link href="../assets/switcher/demo.css" rel="stylesheet" />

Go to root path: layouts/main-scripts open "main-scripts.php" file and add switcher.js links given below.

     
		Add switcher js:

		<!-- INTERNAL SWITCHER JS -->
		<script src="../assets/switcher/js/switcher.js"></script>

Go to root path: layouts/main-scripts.php open "main-scripts.php" file and then change custom.js link to custom1.js link given below.

     
		change custom js link

		Before :

		<!-- CUSTOM JS -->
		<script src="../assets/js/custom.js"></script>
		
		After :
		
		<!-- CUSTOM1 JS -->
		<script src="../assets/js/custom1.js"></script>

NOTE: Custom1.js file is only used when you want to use switcher for your template.

Go to root path: pages open "All php pages" file and then Replace app-header.php to app-header1.php given below.

Go to root path: pages open All php pages in that file, below the body tag switcher path given below.

     
		Switcher path:

NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).

How to add switcher for custom pages?

Go to root path: layouts/custom-styles open "custom-styles.php" file and add switcher css links given below.

     
		Add switcher css:
				
		<!-- INTERNAL SWITCHER CSS -->
		<link href="../assets/switcher/css/switcher.css" rel="stylesheet" />
		<link href="../assets/switcher/demo.css" rel="stylesheet" />

Go to root path: layouts/custom-scripts open "custom-scripts.php" file then add switcher.js link given below.

     
		Add switcher js:

		<!-- SWITCHER JS -->
		<script src="../assets/switcher/js/switcher.js"></script>

Go to root path: layouts/custom-scripts open "custom-scripts.php" file and then change custom.js link to custom1.js link given below.

     

		change custom js link

		Before :

		<!-- CUSTOM JS -->
		<script src="../assets/js/custom.js"></script>
		
	
		
		After :
	
		<!-- CUSTOM1 JS -->
		<script src="../assets/js/custom1.js"></script>

Go to root path: pages open "Custom php pages" in the body section add the "custom switcher icon code" given below.

     
		Add custom switcher icon code:

Go to root path pages open Custom php pages in the body section add the custom switcher path given below.

Chart color

NOTE: If you want to change your chart colors according to the theme colors, then follow the process.(Skip this process if this is not your requirement).

How to change colors of any chart according to the primary color of the template?

Assume that you want to add chart in empty.php page then create an empty.js file, which is used for that particular page only.
Place your chart data in the empty.js file in a particular function related to that chart. If you are using more than one chart in empty.php page, then please create a new function() and a new id (here id is nothing but a name that you used for your particular chart. function() name and ID name must be unique for every chart).
Here i created a new function with name (myChart()) for my new chart in empty.php page

     

		for chart 1:	function myChart1() {

				----chart1 data----
				#chartId1

						}

		for chart 2:	function myChart2() {
			
				----chart2 data----
				#chartId2
							}

How to apply colors to the new chart?

Open themecolor.js (root path: assets/js/themecolor.js) and paste the below code inside of the function names() function of (// chart colors) section.

     

		export function names() {

		Ex:
			if(document.querySelector('#chartId1') !== null){
				myChart1();
			}

			if(document.querySelector('#chartId2') !== null){
				myChart2();
			}

Here (#chartId1) is nothing but, the id that you used for your particular chart.
Here myChart1(); is nothing but a function that you used for your particular chart.
Open empty.js file and add( myVarVal ) variable in a place, where you want to change the colors of your chart according to the primary color of the template.
NOTE: For more understanding please refer below code which we used in index1.js file present in root path: "assets/js/index1.js".


											colors: [ myVarVal || "#38cab3","#e4e7ed"],

Here myVarVal is nothing but a variable name, if you use this variable anywhere then the color of that particular place will change according to theme color

FAQ'S

1) How to Change Font Style ?

Step 1:

Go To _style.scss ( assets/scss/style.scss )

if you want to change another font-family Go to the site Google Fonts And Slect One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add Your Selected font-family in _custom-styles.scss(assets/scss/custom/_custom-styles.scss)

Example:


	body {
		font-family: "Roboto", sans-serif;
	}

2) How to Change Primary Color ?

Step 1:

Go To _custom-styles.scss (assets/scss/custom/_custom-styles.scss )

You will find --primary-bg-color:#38cab3; , where you can simply change color code to change primary color

How to Change Primary Color

Example:

Simply you can also change color for primary-bg-hover:#5cd3b9; & --primary-bg-border:#38cab3; , where you can simply change color code to change them

3) How to Change Logo ?

Go To "assets/img/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

4) How to Enable RTL version?

One more methode to add RTL version

open custom.js path:(assets/js/custom.js) file go to Left-menu Styles. and remove comments for $('body').addClass('rtl') to enable RTL version as shown in below


		/*RTL Layout Style*/
			// $('body').addClass('rtl');
		/*RTL Layout Style End*/

Remove the comments to enable $('body').addClass('rtl') as shown below


		/*RTL Layout Style*/
			$('body').addClass('rtl');
		/*RTL Layout Style End*/

5) How to Enable Darktheme?

open custom.js path:(assets/js/custom.js) file go to SWITCHER-toggle and remove comments for dark-mode to enable dark-mode style as shown in below


	/*Dark Layout Start*/
	// $('body').addClass('dark-theme');
	/*Dark Layout End*/

Remove the comments to enable dark-mode as shown below


	/*Dark Layout Start*/
		 $('body').addClass('dark-theme');
	/*Dark Layout End*/

6) How to Enable Transparent theme?

open custom.js path:(assets/js/custom.js) file go to Transparent Layout and remove comments for transparent-theme to enable Transparent theme style as shown in below


	/*Transparent Layout Start*/
	// $('body').addClass('transparent-theme');
	/*Transparent Layout End*//

Remove the comments to enable dark-mode as shown below


	/*Transparent Layout Start*/
		$('body').addClass('transparent-theme');
	/*Transparent Layout End*/

7) How to Change Transparent body color?

Step 1:

Go To _custom-styles.scss (assets/scss/custom/_custom-styles.scss )

You will find --transparent-body :#30b5a1; , where you can simply change color code to change transparent body color

Example:Below image shows Before and After changing transparent body color

8) How to Enable Background image in Transparent theme?

open custom.js path:(assets/js/custom.js) file go to Transparent image1 Layout and remove comments for bg-img1 & transparent-theme to enable Transparent theme with background image style as shown in below


	
	/*Transparent Layout Start*/
		// $('body').addClass('transparent-theme');
	/*Transparent Layout End*/
	
	/*Transparent image1 Layout Start*/
		// $('body').addClass('bg-img1');
	/*Transparent Layout End*/

Remove the comments to enable bg-img1 & transparent-theme as shown below


	/*Transparent Layout Start*/
		$('body').addClass('transparent-theme');
	/*Transparent Layout End*/
	/*Transparent image1 Layout Start*/
		$('body').addClass('bg-img1');
	/*Transparent Layout End*/

Go To "assets/img/media" folder and replace your image with Previous image(bg-img1) within in image size. note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.

9) How to Enable Color-header?

open custom.js path:(assets/js/custom.js) file go to Header Styles. and remove comments for color-header to enable color-header style as shown in below


	/*Color Header Start*/
	// $('body').addClass('color-header');
	/*Color Header End*/

Remove the comments to enable color-header as shown below


	/*Color Header Start*/
		 $('body').addClass('color-header');
	/*Color Header End*/

10) How to Enable Dark-header?

open custom.js path:(assets/js/custom.js) file go to Header Styles. and remove comments for dark-header to enable dark-header style as shown in below


	/*Dark Header Start*/
	// $('body').addClass('dark-header');
	/*Dark Header End*/

Remove the comments to enable dark-header as shown below


	/*Dark Header Start*/
		 $('body').addClass('dark-header');
	/*Dark Header End*/

11) How to Enable Light-header?

open custom.js path:(assets/js/custom.js) file go to Header Styles. and remove comments for light-header to enable light-header style as shown in below


	/*Light Header Start*/
	// $('body').addClass('light-header');
	/*Light Header End*/

Remove the comments to enable light-header as shown below


	/*Light Header Start*/
		 $('body').addClass('light-header');
	/*Light Header End*/

12) How to Enable Gradient-header?

open custom.js path:(assets/js/custom.js) file go to Header Styles. and remove comments for gradient-header to enable gradient-header style as shown in below


	/*Gradient Header Start*/
	// $('body').addClass('gradient-header');
	/*Gradient Header End*/

Remove the comments to enable gradient-header as shown below


	/*Gradient Header Start*/
		 $('body').addClass('gradient-header');
	/*Gradient Header End*/

````````````````````````````````````````````````````````````

13) How to Enable Light Menu?

open custom.js path:(assets/js/custom.js) file go to Left-menu Styles. and remove comments for light-menu to enable light-menu style as shown in below


	/*Light Menu Start*/
	// $('body').addClass('light-menu');
	/*Light Menu End*/

Remove the comments to enable light-menu as shown below


	/*Light Menu Start*/
		$('body').addClass('light-menu');
	/*Light Menu End*/

14) How to Enable Color Menu?

open custom.js path:(assets/js/custom.js) file go to Left-menu Styles. and remove comments for color-menu to enable color-menu style as shown in below


	/*Color Menu Start*/
	// $('body').addClass('color-menu');
	/*Color Menu End*/

Remove the comments to enable color-menu as shown below


	/*Color Menu Start*/
		 $('body').addClass('color-menu');
	/*Color Menu End*/

15) How to Enable Dark Menu?

open custom.js path:(assets/js/custom.js)file go to Leftmenu Style. and remove comments for dark-menu to enable dark-menu style as shown in below


	/*Dark Menu Start*/
	// $('body').addClass('dark-menu');
	/*Dark Menu End*/

Remove the comments to enable dark-menu as shown below


	/*Dark Menu Start*/
		$('body').addClass('dark-menu');
	/*Dark Menu End*/

16) How to Enable Gradient Menu?

open custom.js path:(assets/js/custom.js)file go to Leftmenu Style. and remove comments for gradient-menu to enable gradient-menu style as shown in below


	/*Gradient Menu Start*/
	// $('body').addClass('gradient-menu');
	/*Gradient Menu End*/

Remove the comments to enable gradient-menu as shown below


	/*Gradient Menu Start*/
		 $('body').addClass('gradient-menu');
	/*Gradient Menu End*/

17) How to Enable Boxed-Layout?

open custom.js path:(assets/js/custom.js)file go to Layout-width Styles. and remove comments for layout-boxed to enable layout-boxed style as shown in below


	/*Boxed Layout Start*/
	// $('body').addClass('layout-boxed');
	/*Boxed Layout End*/

Remove the comments to enable layout-boxed as shown below


	/*Boxed Layout Start*/
		$('body').addClass('layout-boxed');
	/*Boxed Layout End*/

18) How to Enable Scrollable-Layout?

open custom.js path:(assets/js/custom.js) file go to Header-Position Styles. and remove comments for scrollable-layout to enable scrollable-layout style as shown in below


	/*Scrollable Layout Start*/
	// $('body').addClass('scrollable-layout');
	/*Scrollable Layout End*/

Remove the comments to enable scrollable-layout as shown below


	/*Scrollable Layout Start*/
		$('body').addClass('scrollable-layout');
	/*Scrollable Layout End*/

19) How to Enable Sidemenu-Icon-with Text?

open custom.js path:(assets/js/custom.js) file and remove comments for sidemenu-icontext to enable sidemenu-icontext style as shown in below


		/*Icon Text Sidemenu Start*/
			// $('body').addClass('icontext-menu');
			// $('body').addClass('sidenav-toggled');
			// if(document.querySelector('.icontext-menu').classList.contains('error-page1') !== true){
			// icontext();}
		/*Icon Text Sidemenu End*/

Remove the comments to enable sidemenu-icontext as shown below


		/*Icon Text Sidemenu Start*/
			$('body').addClass('icontext-menu');
			$('body').addClass('sidenav-toggled');
			if(document.querySelector('.icontext-menu').classList.contains('error-page1') !== true){
			icontext();}
		/*Icon Text Sidemenu End*/

20) How to Enable Closed-Menu?

open custom.js path:(assets/js/custom.js) file and remove comments for Closed Sidemenu to enable closed menu style as shown in below


		/*Closed Sidemenu Start*/
			// $('body').addClass('closed-menu');
			// $('body').addClass('sidenav-toggled');
			// if(document.querySelector('.closed-menu').classList.contains('error-page1') !== true){
			// hovermenu();}
		/*Closed Sidemenu End*/

Remove the comments to enable Closed Sidemenu as shown below


		/*Closed Sidemenu Start*/
			$('body').addClass('closed-menu');
			$('body').addClass('sidenav-toggled');
			if(document.querySelector('.closed-menu').classList.contains('error-page1') !== true){
			hovermenu();}
		/*Closed Sidemenu End*/

21) How to Enable Icon Overlay

open custom.js path:(assets/js/custom.js) file and remove comments for Icon Overlay Sidemenu to enable Icon Overlay style as shown in below


		/*Side icon menu Start*/
			// $('body').addClass('sideicon-menu');
			// $('body').addClass('sidenav-toggled');
			// if(document.querySelector('.sideicon-menu').classList.contains('error-page1') !== true){
			//hovermenu();}
		/*Side icon menu End*/

Remove the comments to enable sideicon-menu as shown below


		/*Side icon menu Start*/
			$('body').addClass('sideicon-menu');
			$('body').addClass('sidenav-toggled');
			if(document.querySelector('.sideicon-menu').classList.contains('error-page1') !== true){
			hovermenu();}
		/*Side icon menu End*/

22) How to Enable Hover Submenu

open custom.js path:(assets/js/custom.js) file and remove comments for Hover Submenu to enable Hover submenu style as shown in below


		/*hover submenu start*/
			// $('body').addClass('hover-submenu');
			// $('body').addClass('sidenav-toggled');
			// if(document.querySelector('.hover-submenu').classList.contains('error-page1') !== true){
			//hovermenu();}
		/*hover submenu end*/

Remove the comments to enable Hover Submenu as shown below


		/*hover submenu start*/
			$('body').addClass('hover-submenu');
			$('body').addClass('sidenav-toggled');
			if(document.querySelector('.hover-submenu').classList.contains('error-page1') !== true){
			hovermenu();}
		/*hover submenu end*/

23) How to Enable Hover Submenu style1

open custom.js path:(assets/js/custom.js) file and remove comments for Hover Submenu Style1 to enable Hover submenu style1 style as shown in below


		/*hover submenu style1 start*/
			// $('body').addClass('hover-submenu1');
			// $('body').addClass('sidenav-toggled');
			// if(document.querySelector('.hover-submenu1').classList.contains('error-page1') !== true){
			//hovermenu();}
		/*hover submenu style1 end*/

Remove the comments to enable Hover Submenu Style1 as shown below


		/*hover submenu style1 start*/
			$('body').addClass('hover-submenu1');
			$('body').addClass('sidenav-toggled');
			if(document.querySelector('.hover-submenu1').classList.contains('error-page1') !== true){
			hovermenu();}
		/*hover submenu style1 end*/

24) How to Enable Horizontal layout

open custom.js path:(assets/js/custom.js) file and remove comments for Horizontal layout to enable Horizontal layout style as shown in below


		/*Horizontal start*/
			// $('body').addClass('horizontal');
			// if(document.querySelector('.horizontal').classList.contains('error-page1') !== true){
			// 	document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
			// 	menuClick();
			// }
		/*Horizontal end*/

Remove the comments to enable Horizontal layout as shown below


		/*Horizontal start*/
			$('body').addClass('horizontal');
			if(document.querySelector('.horizontal').classList.contains('error-page1') !== true){
			document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
			menuClick();
			}
		/*Horizontal end*/

25) How to Enable Horizontal Hover layout

open custom.js path:(assets/js/custom.js) file and remove comments for Horizontal Hover layout to enable Horizontal Hover layout style as shown in below


		/*Horizontal-hover start*/
			// $('body').addClass('horizontal-hover');
			// $('body').addClass('horizontal');
			// if(document.querySelector('.horizontal-hover').classList.contains('error-page1') !== true){
			// 	document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
			// 	HorizontalHovermenu();
			// }
		/*Horizontal-hover end*/

Remove the comments to enable Horizontal Hover layout as shown below


		/*Horizontal-hover start*/
			$('body').addClass('horizontal-hover');
			$('body').addClass('horizontal');
			if(document.querySelector('.horizontal-hover').classList.contains('error-page1') !== true){
			document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
			HorizontalHovermenu();
			 }
		/*Horizontal-hover end*/

26) How to Enable Horizontal or Horizantal Hover layout With Wrap Style

open custom.js path:(assets/js/custom.js) file and replacenoWrap with wrap in Horizontal (or) Horizontal Hover layout to enable wrap style for Horizantal or Horizantal Hover


			document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'

Replace noWrap with wrap as shown below


			document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'

Below Image Shows How Wrap and Nowrap Styles Looks like.

Example:

Simply you can change noWrap with wrapto change the style of Horizontal or Horizontal Hover Menus

Sources

Bootstrap
https://getbootstrap.com/
Jquery
https://jquery.com/
Jquery Datepicker
https://jqueryui.com/datepicker/
Jquery Timepicker
https://jonthornton.github.io/jquery-timepicker/
Perfect-scrollbar
https://github.com/mdbootstrap/perfect-scrollbar
Full Calendar
https://fullcalendar.io/
File Uploads
https://www.jqueryscript.net/demo/jQuery-Plugin-To-Beautify-File-Inputs-with-Custom-Styles-Dropify/
Select2
https://select2.org/
Datatable
https://datatables.net/
Font Awesome Icons
https://fontawesome.com/
Material Design Icons
https://materialdesignicons.com/
Simpleline Icons
https://iconify.design/icon-sets/simple-line-icons/
Ionicons
https://ionicons.com/
ion.rangeSlider
http://ionden.com/a/plugins/ion.rangeSlider/index.html
jquery-countdown
http://keith-wood.name/countdown.html
jquery-inputmask
https://robinherbots.github.io/Inputmask/
jquery-sparkline
https://omnipotent.net/jquery.sparkline/#s-about
jQuery StarRatingSvg
http://github.com/nashio/star-rating-svg
Sweet-alert
https://lipis.github.io/bootstrap-sweetalert/
Sparkline Charts
https://omnipotent.net/jquery.sparkline/#s-about
Chartjs
https://www.chartjs.org/
Flotcharts
https://www.flotcharts.org/plugins/
Echarts
https://echarts.apache.org/en/index.html
Morris Chart
https://morrisjs.github.io/morris.js/
Wysiwyag
https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/
Summernote Editor
https://summernote.org/

Font Used

Google fonts are used in the template. They are as follows: Google Fonts

All Images are used: Pexels.com

nowa - PHP Bootstrap 5 Admin & Dashboard Template

Introduction

Welcome to nowa - PHP Bootstrap 5 Admin & Dashboard Template

Dashboard

Template Description

Main Features

Check out the folder structure of the Layout

How to Run PHP Project in localhost

Step:1 Quick view of Installations

Step:2 Run project

How to use GULP

SCSS & CSS

Compiling Styles

Folder Structure

Installation Instructions For both CPANEL’S and FTP

FTP Uploading Process

cPanel Uploading Process

Version

Over All Folder Structure

SWITCHER?

How to add switcher to the template?

How to add switcher for custom pages?

Chart color

How to change colors of any chart according to the primary color of the template?

How to apply colors to the new chart?

FAQ'S

1) How to Change Font Style ?

Step 1:

How to Select font Family

Step 2:

Step 3:

2) How to Change Primary Color ?

Step 1:

How to Change Primary Color

3) How to Change Logo ?

4) How to Enable RTL version?

One more methode to add RTL version

5) How to Enable Darktheme?

6) How to Enable Transparent theme?

7) How to Change Transparent body color?

Step 1:

8) How to Enable Background image in Transparent theme?

9) How to Enable Color-header?

10) How to Enable Dark-header?

11) How to Enable Light-header?

12) How to Enable Gradient-header?

13) How to Enable Light Menu?

14) How to Enable Color Menu?

15) How to Enable Dark Menu?

16) How to Enable Gradient Menu?

17) How to Enable Boxed-Layout?

18) How to Enable Scrollable-Layout?

19) How to Enable Sidemenu-Icon-with Text?

20) How to Enable Closed-Menu?

21) How to Enable Icon Overlay

22) How to Enable Hover Submenu

23) How to Enable Hover Submenu style1

24) How to Enable Horizontal layout

25) How to Enable Horizontal Hover layout

26) How to Enable Horizontal or Horizantal Hover layout With Wrap Style

Below Image Shows How Wrap and Nowrap Styles Looks like.

Sources

Font Used

THANK YOU!