How to create wordpress add menu item without link

“ wordpress add menu item without link ” is commonly interested in practice because different web pages have different purposes. This article will guide you on how to do this.In the previous article, we created a mega menu via bootstrap . This one will guide you on creating a simpler menu in wordpress

Links in menus play an important role in redirecting to the page wanted. It helps customers move to the necessary links. All items in the menu include links by default.

One time, one user asked me if there was any way to add a title to the wordpress menu without adding a link ( wordpress add menu item without link ). By default, the menu of WordPress must be linked to a page, an article, a category or added a link manually. Usually, it is helpful when you create one menu item which includes submenus. In wordpress, you can follow the below way.

wordpress add menu item without link

Next, you can create a new menu or add more items to the existing menu. In this example, I will create a new menu as below

wordpress add menu item without link

Add a new item in the custom module: enter # in url item, enter a custom name of the item in Link Text, this name will be displayed in the front end.

Keep creating new submenus in this item by adding new, and dragging and dropping as below.

wordpress add menu item without link

After that, click on the arrow button, a textbox shows up, delete the # you have entered before. After having deleted, please save the result.

wordpress add menu item without link

We hope that the article wordpress add menu item without link have helped you a lot and reduce your trouble. You can contact us if you need supports. You also leave a comment below.

 

bootstrap mega menu full width

Today we will make a bootstrap mega menu full width. Because the number of smart phone and tablet users is coming more and more, a full-width-screen mega menu would be much greater. A mega menu shows more information and is more attractive, so many people use it.

Being different from other articles, this one “bootstrap mega menu full width” includes edited css so that the menu is always full width. You should track the following steps to have the one like the demo

Preparation

Use notepad ++ to create and edit files. Besides, you can also use other programs.

In addition, you should use browsers to check. I prioritize Google Chrome because it consumes little amount of memory. Depending on your operating system, you should choose appropriate browsers.

Implementation

Create an html file.

Create an index.html file including the following contents and save them



<div class="fixed-top navbarnavbar-light bg-light navbar-expand-md">

<div class="container">

<a class="navbar-brand" href="/">Brand </a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>

<div class="navbar-collapse collapse">

<ul class="navnavbar-nav">

<li class="nav-item"><a href="#" class="nav-link">Home</a>

</li>

<li class="dropdown menu-large nav-item"><a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"> Product Listing </a>

<ul class="dropdown-menu megamenu">

<li class="dropdown-item">

<div class="row">

<div class="col-md-6 col-lg-3 text-center">

<div class="card">

<a href="#" class="thumbnail">

<imgsrc="http://placehold.it/150x120">

</a>

</div>

</div>

<div class="col-md-6 col-lg-3 text-center">

<div class="card">

<a href="#" class="thumbnail">

<imgsrc="http://placehold.it/150x120">

</a>

</div>

</div>

<div class="col-md-6 col-lg-3 text-center">

<div class="card">

<a href="#" class="thumbnail">

<imgsrc="http://placehold.it/150x120">

</a>

</div>

</div>

<div class="col-md-6 col-lg-3 text-center">

<div class="card">

<a href="#" class="thumbnail">

<imgsrc="http://placehold.it/150x120">

</a>

</div>

</div>

</div>

</li>

</ul>

</li>

<li class="dropdown menu-large nav-item"><a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Categories </a>

<ul class="dropdown-menu megamenu">

<div class="row">

<li class="col-md-3 dropdown-item">

<ul>

<li class="dropdown-header">Glyphicons</li>

<li><a href="#">Available glyphs</a>

</li>

<li class="disabled"><a href="#">How to use</a>

</li>

<li><a href="#">Examples</a>

</li>

<li class="divider"></li>

<li class="dropdown-header">Dropdowns</li>

<li><a href="#">Example</a>

</li>

<li><a href="#">Aligninment options</a>

</li>

<li><a href="#">Headers</a>

</li>

<li><a href="#">Disabled menu items</a>

</li>

</ul>

</li>

<li class="col-md-3 dropdown-item">

<ul>

<li class="dropdown-header">Button groups</li>

<li><a href="#">Basic example</a>

</li>

<li><a href="#">Button toolbar</a>

</li>

<li><a href="#">Sizing</a>

</li>

<li><a href="#">Nesting</a>

</li>

<li><a href="#">Vertical variation</a>

</li>

<li class="divider"></li>

<li class="dropdown-header">Button dropdowns</li>

<li><a href="#">Single button dropdowns</a>

</li>

</ul>

</li>

<li class="col-md-3 dropdown-item">

<ul>

<li class="dropdown-header">Input groups</li>

<li><a href="#">Basic example</a>

</li>

<li><a href="#">Sizing</a>

</li>

<li><a href="#">Checkboxes and radio addons</a>

</li>

<li class="divider"></li>

<li class="dropdown-header">Navs</li>

<li><a href="#">Tabs</a>

</li>

<li><a href="#">Pills</a>

</li>

<li><a href="#">Justified</a>

</li>

</ul>

</li>

<li class="col-md-3 dropdown-item">

<ul>

<li class="dropdown-header">Navbar</li>

<li><a href="#">Default navbar</a>

</li>

<li><a href="#">Buttons</a>

</li>

<li><a href="#">Text</a>

</li>

<li><a href="#">Non-nav links</a>

</li>

<li><a href="#">Component alignment</a>

</li>

<li><a href="#">Fixed to top</a>

</li>

<li><a href="#">Fixed to bottom</a>

</li>

<li><a href="#">Static top</a>

</li>

<li><a href="#">Inverted navbar</a>

</li>

</ul>

</li>

</div>

</ul>

</li>

</ul>

</div>

</div>

</div>

Create css file

Create style.css file including the following contents and save them.


.menu-large {

position: static !important;

}

 

.megamenu {

padding: 20px 20px;

width: 100%;

}

 

.megamenu> div > li >ul {

padding: 0;

margin: 0;

}

 

.megamenu> div > li >ul> li {

list-style: none;

}

.megamenu> div > li >ul> li > a {

display: block;

padding: 3px 20px;

clear: both;

font-weight: normal;

line-height: 1.428571429;

color: #333333;

white-space: normal;

}

.megamenu> div > li >ul> li > a:hover,

.megamenu> div > li >ul> li > a:focus {

text-decoration: none;

color: #262626;

background-color: #f5f5f5;

}

.megamenu.disabled> a,

.megamenu.disabled> a:hover,

.megamenu.disabled> a:focus {

color: #999999;

}

.megamenu.disabled> a:hover,

.megamenu.disabled> a:focus {

text-decoration: none;

background-color: transparent;

background-image: none;

filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);

cursor: not-allowed;

}

.megamenu.dropdown-header {

color: #428bca;

font-size: 18px;

}

@media (max-width: 768px) {

.megamenu {

margin-left: 0;

margin-right: 0;

}

.megamenu> li {

margin-bottom: 30px;

}

.megamenu>li:last-child {

margin-bottom: 0;

}

.megamenu.dropdown-header {

padding: 3px 15px !important;

}

.navbar-nav .open .dropdown-menu .dropdown-header {

color: #fff;

}

}

We have finished the article bootstrap mega menu full width. Certainly, you will be successful if you follow the steps above. If you use Prestashop source code, I suggest that you should use Mega menu module because it has many options. You can check the demo as well as its administration via demo account. If you are interested in the module, you could get access to this link for more information.

do not access superglobal $_post array directly

do not access superglobal $_post array directly is a commonly met notification when using Netbeans editor. It is a safety warning to avoid cases of SQL injection. Injection errors are so dangerous because hackers can attack to get passwords and edit data. The methods they use to attack forms are through posting and getting.

In another article, we will perform the attacking methods, and precaution approaches with SQL injection. In this one, we will use methods of getting data without using variables $_POST or  $_GETas normal. If we follow this way, Netbeans will not display notification do not access superglobal $_post array directly anymore.

In PHP in common and other source codes in general, there are two techniques that form uses are getting and posting. In the previous lesson, we practice using form a lot. If input includes a name that is data, getting data will be $_POST[‘data’] or $_GET[‘data’] depending on the method that form uses, getting or posting.

In this article, we do not use these two above methods but use filter_input (INPUT_POST, ‘data’,FILTER_SANITIZE_STRING) instead. We will check the two below examples in order to prove that data can be got in two ways.

You start apache on xampp. If you use other software, do it similarly. In folder D:\XAMPP\htdocs, you create form folder. Create file index.hph including content as below:

<?php
/**
* @author TRAN DINH HONG
* @copyright 2018
*/
echo "filter_input : ".filter_input (INPUT_POST, 'data',FILTER_SANITIZE_STRING) ;
echo "<br/>$ _POST['data'] :".$_POST['data']
?>
<br /><br />
<form method="post">
<input type="text" name="data" />
<input type="submit" />
<style>
body{width: 321px;
margin: auto;
margin-top: 150px;
height: 60px;
border: 1px solid #ddd;
padding: 30px;}
</style>
</form>

After implementing and entering content, for example, “this is data”, both two ways lead to the same result.

do not access superglobal $_post array directly
We have solved the problem related to security of form. do not access superglobal $_post array directly is the only one in many notifications in editing software. Specifically, they are notifications relating to syntax errors, security errors, or updates. Following these notifications not only help our code be visual, easy to read but also make our projects safer.
Currently, creating any website also needs to use form. Many websites are built by using apps, plugins, form builder modules while others are generated by self-writing codes. So, understanding about security well is very important.
You can download the code below for convenient using and checking.